打開 項目依賴 不能 span 跳轉 line lB 調用 需要

前面介紹了使用webpack做最基礎的打包，接下來講講webpack的進階。

1、使用 webpack 構建本地服務器：

　　想不想讓你的瀏覽器監聽你的代碼的修改，並自動刷新顯示修改後的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，可以實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴

npm install --save-dev webpack-dev-server -g

　　devServer作為webpack配置選項中的一項，以下是它的一些配置選項，更多配置可以參考這裏

devserver的配置選項	功能描述
contentBase	默認webpack-dev-server會為根文件夾提供本地服務器， 如果想為另外一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到“public"目錄）
port	設置默認監聽端口，如果省略，默認為”8080“
inline	設置為true，當源文件改變時會自動刷新頁面
historyApiFallback	在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html

　把這些命令加到webpack的配置文件中，現在的配置文件webpack.config.js

如下所示：　　

module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包後的文件存放的地方
        filename: "bundle.js" //打包後輸出文件的文件名
    },
    devServer: {
        contentBase: "./public", //本地服務器所加載的頁面所在的目錄
        historyApiFallback: true, //不跳轉
        inline: true //實時刷新
    }
}
 

　　在package.json中的scripts對象中添加如下命令，用以開啟本地服務器：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  }

　　在終端中輸入npm run server即可在本地的8080端口查看結果

　　

2、Loaders

　　接著就是大名鼎鼎的Loaders了！　

　　Loaders是webpack提供的最激動人心的功能之一了。通過使用不同的loader，webpack有能力調用外部的腳本或工具，實現對不同格式的文件的處理，比如說分析轉換sass為css，或者把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器兼容的JS文件，對React的開發而言，合適的Loaders可以把React的中用到的JSX文件轉換為JS文件。所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然後找到 url() 表達式然後處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。 　　接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數 -g)。

cnpm install css-loader style-loader

　　 執行以上命令後，會在node_modules 目錄安裝 css-loader 和 style-loader 。

　　接下來在app目錄下新建一個css 文件，代碼如下：

body{
  background-color: green;  
}

　　修改main.js文件，代碼如下：

//main.js 
require("!style-loader!css-loader!./style.css");
const greeter = require(‘./Greeter.js‘);
document.querySelector("#root").appendChild(greeter());

　　接下來我們使用 webpack 命令來打包：

webpack app/main.js -o public/bundle.js
或者之前配置 start 可以使用：
npm start

　　註： 之前css-loader 和 style-loader 若是全局安轉，在打包時可能會報錯，這倆個依賴無法找到。這時可以使用以下代碼解決：

npm link css-loader
npm link style-loader

　　在瀏覽器訪問，輸出結果如下所示：　

　　require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!，當然我們可以根據模塊類型（擴展名）來自動綁定需要的 loader。 將 main.js中的require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：

//main.js 
require("./style.css");
const greeter = require(‘./Greeter.js‘);
document.querySelector("#root").appendChild(greeter());

　　然後執行：　

webpack app/main.js -o public/bundle.js --module-bind "css=style-loader!css-loader"

　　在瀏覽器中訪問，效果同上種。

3、配置文件

　　我們可以將一些編譯選項放在配置文件中（webpack.config.js），以便於統一管理：　

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {　　　　//新增配置文件　　　　　　　　　　　　　　　　　　　　　　　　
        rules: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }，
　　devServer: {
　　　　contentBase: "./public",　　
　　　　historyApiFallback: true,
　　　　inline: true
　　}

};

4、插件　

　　插件在 webpack 的配置信息 plugins 選項中指定，用於完成一些 loader 不能完成的工。

　　webpack 自帶一些插件，你可以通過 cnpm 安裝一些插件。

　　使用內置插件需要通過以下命令來安裝：

cnpm install webpack --save-dev

　　比如我們可以安裝內置的 BannerPlugin 插件，用於在文件頭部輸出一些註釋信息。修改 webpack.config.js，代碼如下：

var webpack = require(‘webpack‘);
module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包後的文件存放的地方
        filename: "bundle.js" //打包後輸出文件的文件名
    },
    devServer: {
        contentBase: "./public", //本地服務器所加載的頁面所在的目錄
        historyApiFallback: true, //不跳轉
        inline: true //實時刷新
    },
    module: { //新增配置文件
        rules: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins: [　//用於輸出註釋信息　　　
        new webpack.BannerPlugin(‘註釋：編譯後文件！‘)
    ]
}

　　然後運行嗎，打開bundle.js，可以看到文件頭部出現了我們指定的註釋信息。

webpack入門系列2