[TOC] #### 前言 --- 本文記錄 webpack 的安裝和使用，并且使用 webpack 搭建 vue 簡易腳手架的過程 通過本文可以對 loader、plugin 有個簡單的認(rèn)識，記錄了常用的 loader 和 plugin，可以增強(qiáng)對 vue 腳手架的理解 #### 1. 構(gòu)建項(xiàng)目 --- ``` ├── src ├── js │ ├── common.js │ └── es6.js └── main.js ├── index.html ``` common.js ``` module.exports = { name: 'liang', age: 23, gender: '男' } ``` es6.js ``` const add = (num1, num2) => num1 + num2 const mul = (num1, num2) => num1 * num2 export { add, mul } ``` main.js ``` const user = require('./js/common'); const { add, mul } = require('./js/es6'); console.log(user, add(2, 3), mul(2, 3)); ``` #### 2. 局部安裝 --- 初始化 npm 項(xiàng)目（有交互命令，一路回車即可） ```bash npm init ``` 安裝 webpack，其中 webpack: 核心模塊 webpack-cli: 命令行工具 ```bash npm install webpack webpack-cli --save-dev ``` webpack 3 執(zhí)行打包 ```bash webpack ./src/main.js ./dist/bundle.js ``` webpack 5 執(zhí)行打包 ``` webpack ./src/main.js -o ./dist ``` #### 3. webpack.config.js --- 在項(xiàng)目根目錄下新建 webpack.config.js 文件，文件內(nèi)容如下所示 ```javascript const path = require('path'); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js" }, mode: "development" } ``` **mode: "development"** 是為了去除打包時的警告提示  在 **src/index.html** 中引入打包后生成的 js 文件 ```html <script src="./dist/bundle.js"></script> ``` #### 4. 打包 css 文件 --- 新建 css 文件, 并且在 main.js 中依賴 css 文件 ``` require('./css/normal.css') ```  您可能需要適當(dāng)?shù)募虞d程序來處理此文件類型，目前沒有配置加載程序來處理此文件 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.  此時需要安裝 css-loader webpack 官網(wǎng): [https://webpack.js.org](https://webpack.js.org) , webpack 中文網(wǎng): [https://webpack.docschina.org](https://webpack.docschina.org) 第一步: 安裝 css-loader ``` npm install --save-dev css-loader ```  第二步: 將 css-loader 引用到 webpack 的配置文件中，然后執(zhí)行打包命令 此時會發(fā)現(xiàn)，css 文件雖然打包成功了，但是樣式并沒有加載到 dom 中。樣式要加載到 dom 中，需要安裝 style-loader  第三步: 安裝 style-loader，然后將 style-loader 引用到 webpack 的配置文件中, 重新打包樣式則已加載到 dom 中了 總結(jié): css-loader 只負(fù)責(zé)加載 css 文件，并不會將樣式添加到 dom 中，需要通過 style-loader 將樣式添加到 dom 中。webpack 配置文件中的 module 配置項(xiàng)中的 use 使用多個 loader 時，加載順序是從右到左的 ```bash npm install --save-dev style-loader ``` ```javascript module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, ``` #### 5. 打包 less 文件 --- ``` npm install less less-loader --save-dev ```  #### 6. 打包 vue 文件 --- 安裝 vue 最新穩(wěn)定版 ``` npm install vue ``` vue loader ``` npm install vue-loader vue-template-compiler --save-dev ``` ``` module: { rules: [ { test: /\.vue$/, use: ["vue-loader"] }, ], }, ``` 打包時提示: 使用 vue loader 時未使用相應(yīng)的插件。確保在您的網(wǎng)頁包配置中包含 VueLoaderPlugin。 vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.  解決方案: 修改 webpack.config.js , 在 plugins 中引入 VueLoaderPlugin ```javascript const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { plugins: [ new VueLoaderPlugin() ] } ``` 運(yùn)行時出現(xiàn)以下錯誤  解決方法 ```javascript module.exports = { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } } ``` import 導(dǎo)入 vue 文件，想要省略 .vue 需要在 webpack.config.js 中添加以下配置項(xiàng)（默認(rèn)只能省略 js 文件后綴） ``` module.exports = { resolve: { alias: { extensions: ['.js', '.vue'] } } } ``` #### 7. loader 和 plugin 區(qū)別 --- loader 主要用于轉(zhuǎn)換某些類型的模塊，它是一個轉(zhuǎn)換器 plugin 是插件，它是對 webpack 本身的擴(kuò)展，它是一個擴(kuò)展器。在 webpack.config.js 中的 plugins 中配置插件 #### 8. 添加版權(quán)的插件 --- 修改 webpack.config.js 配置文件: 這個插件是 webpack 自帶的，不需要另外安裝 npm 包, 打包生成的 js 文件頭部會有版權(quán)信息 ```javascript const webpack = require('webpack'); module.exports = { plugins: [ new webpack.BannerPlugin('最終版權(quán)歸 liang 所有') ] } ``` #### 9. html-webpack-plugin 打包 html 的插件 --- 這個插件可以將 html 文件打包到 dist 目錄下 該插件會在 dist 下生成一個 index.html, 也可以指定模板生成, 自動將打包生成的 js 文件通過 script 標(biāo)簽引入到 index.html 中 安裝插件 ``` npm install html-webpack-plugin --save-dev ``` 修改 webpack.config.js ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: "index.html" }) ] } ``` #### 10. 壓縮文件 --- webpack 5 自帶的壓縮插件 ``` npm install terser-webpack-plugin --save-dev ``` 修改 webpack.config.js ``` const TerserPlugin = require("terser-webpack-plugin"); module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin()], }, }; ``` webpack 3 ``` npm install uglifyjs-webpack-plugin@1.1.1 --save-dev ``` ``` const uglifyjsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { plugins: [ new uglifyjsPlugin() ] } ``` #### 11. webpack-dev-server 搭建本地服務(wù)器 --- 安裝 webpack-dev-server ```bash npm install webpack-dev-server --save-dev ``` 修改 webpack.config.js ```javascript module.exports = { devServer: { static: "./dist" } } ``` 修改 package.json 文件，配置腳本 (--open 代表運(yùn)行本地服務(wù)器時使用默認(rèn)瀏覽器打開網(wǎng)頁) ```json { "scripts": { "dev": "webpack-dev-server --open" } } ```