前面介紹了使用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，可以看到文件頭部出現了我們指定的注釋信息。

轉載于:https://www.cnblogs.com/tg666/p/9222261.html

總結

以上是生活随笔為你收集整理的webpack入门系列2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。