1.webpack 是一個現代JavaScript 應用程序的靜態打包器，它能夠把各種資源，例如JS,樣式，圖片
等都作為模塊來使用處理,將許多松散的模塊按照依賴和規則打包成符合生產部署的前端資源，
還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。
2.安裝
前提條件，請確保安裝了Node.js的最新版。
進入相應的文件夾
首先執行 進入相應的文件夾 npm init 初始化
然后可以全局安裝 npm install webpack --save-dev
安裝指定的版本使用:npm install webpack@3.0.0 --save-dev
安裝好之后寫一個hello.js 進行打包
3.建立項目的webpack 文件
首先初始化目錄: npm init
然后安裝webpack: npm install webpack --save-dev
如果webpack 的配置文件不使用默認的文件名webpack.config.js
那么在執行打包的時候，就要指定配置文件的名字
例如： 配置文件的名字為 webpack.dev.config.js
webpack --config webpack.dev.config.js
webpack 的打包命令可以結合 npm 的腳本使用例如：
那么執行的命令為 : npm run webpack
4.配置:
(1) Entry 應用程序的起點入口，可以是一個文件，如果傳遞一個數組，那么那么數組的每一
項都會執行，也可以是一個對象。
例如：
entry: "./app/entry", // string | object | array entry:["./app/entry1", "./app/entry2"], entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] },
(2) Output 位於對象最頂級鍵(key),包括了一組選項，指示webpack 如何輸出，
以及哪里輸出，和他你所打包或使用webpack 載入的任何內容。
例如：
output: { // webpack 如何輸出結果的相關選項 path: path.resolve(__dirname, "dist"), // string // 所有輸出文件的目標路徑 // 必須是絕對路徑（使用 Node.js 的 path 模塊） filename: "bundle.js", // string filename: "[name].js", // 用於多個入口點(entry point)（出口點？） filename: "[chunkhash].js", // 用於長效緩存 // 「入口分塊(entry chunk)」的文件名模板（出口分塊？） publicPath: "/assets/", // string publicPath: "", publicPath: "https://cdn.example.com/", // 輸出解析文件的目錄，url 相對於 HTML 頁面 library: "MyLibrary", // string, // 導出庫(exported library)的名稱 libraryTarget: "umd", // 通用模塊定義 libraryTarget: "umd2", // 通用模塊定義 libraryTarget: "commonjs2", // exported with module.exports libraryTarget: "commonjs-module", // 使用 module.exports 導出 libraryTarget: "commonjs", // 作為 exports 的屬性導出 libraryTarget: "amd", // 使用 AMD 定義方法來定義 libraryTarget: "this", // 在 this 上設置屬性 libraryTarget: "var", // 變量定義於根作用域下 libraryTarget: "assign", // 盲分配(blind assignment) libraryTarget: "window", // 在 window 對象上設置屬性 libraryTarget: "global", // property set to global object libraryTarget: "jsonp", // jsonp wrapper // 導出庫(exported library)的類型 /* 高級輸出配置（點擊顯示） */ pathinfo: true, // boolean // 在生成代碼時，引入相關的模塊、導出、請求等有幫助的路徑信息。 chunkFilename: "[id].js", chunkFilename: "[chunkhash].js", // 長效緩存(/guides/caching) // 附加分塊(additional chunk)」的文件名模板 jsonpFunction: "myWebpackJsonp", // string // 用於加載分塊的 JSONP 函數名 sourceMapFilename: "[file].map", // string sourceMapFilename: "sourcemaps/[file].map", // string // 「source map 位置」的文件名模板 devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string // 「devtool 中模塊」的文件名模板 devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string // 「devtool 中模塊」的文件名模板（用於沖突） umdNamedDefine: true, // boolean // 在 UMD 庫中使用命名的 AMD 模塊 crossOriginLoading: "use-credentials", // 枚舉 crossOriginLoading: "anonymous", crossOriginLoading: false, // 指定運行時如何發出跨域請求問題 /* 專家級輸出配置（自行承擔風險） */ devtoolLineToLine: { test: /\.jsx$/ }, // 為這些模塊使用 1:1 映射 SourceMaps（快速） hotUpdateMainFilename: "[hash].hot-update.json", // string // 「HMR 清單」的文件名模板 hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string // 「HMR 分塊」的文件名模板 sourcePrefix: "\t", // string // 包內前置式模塊資源具有更好可讀性 },
3)Plugins
例如： 安裝 html-webpack-plugin
命令： npm install html-webpack-plugin --save-dev
首先在webpack.config.js 中引入插件
var htmlWebPackPlugin = require('html-webpack-plugin');
然后在:
plugins: [ new htmlWebPackPlugin({ // 指定生成的文件的名字 filename:'index.html', // 指定html 模板 template:'index.html', // 標簽生成的位置 inject:'head', /* title:'webpack is good', data: new Date()*/ minify:{ // 刪除注釋 removeComments:true, // 刪除空格 collapseWhitespace: true } })]
(4)loader
loader 就是webpack 用來預處理模塊的，在一個模塊被引入之前，會預先
用loader處理模塊的內容。
安裝css loader
npm install style-loader css-loader --save-dev
npm install postcss-loader --save-dev
npm install autoprefixer --save-dev
{ test: /\.css$/, loaders: ['style-loader', 'css-loader', // 處理瀏覽器前綴 { loader: 'postcss-loader', options: { plugins: [require('postcss-import'), require('autoprefixer')], browser: ['last 5 versions'] } }] }
sass
npm install sass --save-dev
npm install sass-loader --save-dev
{ //sass打包處理,加載從右向左，注意順序
test:/\.sass$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"},
{loader: "postcss-loader",options:{
plugins:[require('postcss-import'),require('autoprefixer')] //自動處理class加前綴，-ms-和-webkit-
}},{loader: "sass-loader"}
]
}
圖片處理
npm install file-loader --save-dev
{ // 圖片處理 test:/\.(png|jpg|jpeg|gif|svg)$/i, use:[ { loader:'file-loader', options:{ name:'src/assets/[name]-[hash:5].[ext]' } } ] }
npm install url-loader --save-dev 可以將圖片轉為base64
(5)devServer
安裝命令：
npm install webpack-dev-server --save-dev
在 package.json 中的 scripts 中添加 "start": "webpack-dev-server"
devServer: {
// 自動打瀏覽器
open:true,
// 訪問端口
port:8090,
}