前言css
項目詳情html
目錄結構:webpack
開始進行 webpack 配置nginx
npm init
進行初始化npm install --save-dev webpack webapck-cli
(注意: webpack版本使用的是 4.39.2 )webpack.config.js
配置文件"build": "webpack --config webpack.config.js"
配置入口文件:web
配置出口文件:npm
npm run build
只打包出來了三個js文件, 根本不是我想要的嘛, html 在哪裏呢, 遂百度之. 原來還須要 html 模板, 須要使用 html-webpack-plugin
插件配置 html-webpack-plugin
插件json
將一切依賴資源都模塊化canvas
loader 配置:api
這裏重點說下, html-loader框架
<%= require('html-loader!./view/index.html') %>
, 將 view/index.html 中的代碼引入過來. 這樣看起來就很乾淨.js壓縮:
uglifyjs-webpack-plugin
進行壓縮.分離 css:
mini-css-extract-plugin
進行分離.extract-text-webpack-plugin
配置 webpack-dev-server, 配置以下:
後記: