[TOC] ## 安装webpack ``` cnpm install --save-dev webpack cnpm install --save-dev webpack-cli ``` ## 创建配置 ## 安装 ## 加载css ``` cnpm install --save-dev style-loader css-loader //配置 ``` ## 安装jquery ``` cnpm i jquery -S ``` ## 安装sass ``` npm install sass-loader node-sass webpack --save-dev ``` ``` //rule { test: /\.scss$/, use: [{ loader: "style-loader" // 将 JS 字符串生成为 style 节点 }, { loader: "css-loader" // 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader" // 将 Sass 编译成 CSS }] } ``` ## html-webpack-plugin ``` npm install --save-dev html-webpack-plugin //使用 confiug.js const HtmlWebpackPlugin = require('html-webpack-plugin'); //配置plugins new HtmlWebpackPlugin({ //模板文件 template: 'public/index.html', //输出的文件名 filename: 'index.html', //页面标题 title: 'Zoo Coffee common', //导入的模块 chunks: [ 'index' ], }) ``` ## 配置清理dist [clean-webpack-plugin文档链接](https://www.npmjs.com/package/clean-webpack-plugin) ``` cnpm install clean-webpack-plugin --save-dev //使用 (被坑了 .. 教程上的用法过时) const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //配置大 plugins: [ //清理dist new CleanWebpackPlugin(), ] ``` ## dev-server [dev-server教程](https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server) ``` ``` ## 使用 webpack-dev-middleware ``` ```