[TOC] > [在github 參考源碼](https://github.com/idcpj/vue-mall/tree/master/webpack_demo) ## 目錄結構 ``` src ├── cart.html ├── index.html └── js ├── cart.js ├── common.js └── index.js ``` ## 運行 ``` npm init npm install webpack --save-dev ``` ## 安裝常用插件 ### 編譯 html [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) ``` new HtmlWebpackPlugin({ filename:"cart.html", template:"./src/cart.html", chunks:['cart'], minify:{ //壓縮 html 代碼 removeComments:true, collapseWhitespace:true } }), ``` ### 編譯前先刪除文件 [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin) ``` new CleanWebpackPlugin(['./dist'],{ root:path.join(__dirname,''), verbose:true, dry:false, }), ``` ### css-loader,style-loader ``` npm install --save-dev css-loader style-loader extract-text-webpack-plugin //需要在頁面的 js 中引入 css ,如 index.js import "../css/index.css"; //webpack.config.js module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } ``` ### es6 ``` npm install -D babel-loader @babel/core @babel/preset-env //webpack.config.js rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] ``` ### 使用 jquery [npm 官網](https://www.npmjs.com/package/jquery) ``` npm i jquery //index.js define(["jquery"], function($) { //code }); ``` ### uglifyjs-webpack-plugin js 壓縮 [npm 官網](https://www.npmjs.com/package/webpack-parallel-uglify-plugin) ``` const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { //... optimization: { minimizer: [new UglifyJsPlugin()] } }; ``` ## 技巧 ### js 最好以模塊形式引入 如 ``` //common.js define("common",function () { return { initIndex:function () { console.log("common init index"); }, initCart:function () { console.log("common init cart"); } } }); //index.js require(['./common.js'],function (common) { common.initIndex(); }); ``` ### webpack.config.js 設置 ``` entry: { index:"./src/js/index.js", //設置多入口 cart:'./src/js/cart.js', }, devtool:"#source-map" //用于調試 ```