打包后的js
和css
自动注入到html
中
- 安装
html-webpack-plugin
npm install --save-dev html-webpack-plugin
webpack.config.js
文件新增var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [new HtmlWebpackPlugin()] };
清理dist
目录插件
- 安装
clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
webpack.config.js
文件新增const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { plugins: [ new CleanWebpackPlugin(), ], };
实现调试看见css
文件名
webpack.config.js
文件中module.exports
对象中module ——> rules
中css
的打包规则,更改为module:{ rules:[ { test:/\.css$/, use:[ 'style-loader', { loader:'css-loader', options:{ sourceeMap:true } } ] } ] }
实现调试看见css
源文件位置及sass
添加css3
前缀
- 安装
postcss-loader
和autoprefixer
npm i -D postcss-loader
npm i autoprefixer --save-dev
webpack.config.js
文件中module.exports
对象中module ——> rules
中css
的打包规则,更改为module:{ rules:[ // 用style-loader和css-loader处理css文件 { test:/\.(c|sc|sa)ss$/, use:[ 'style-loader', { loader:'css-loader', options:{ sourceMap:true } }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap:true, plugins: [ require('autoprefixer')({browsers:['> 0.15% in CN']}) ] } }, { loader:"sass-loader", options:{ sourceMap:true } } ] } ] }
查看js
源文件,便于调试
webpack.config.js
文件module.exports={ // 不建议用于生产环境 devtool:"inline-source-map", }
启动监控自动编译
- 在
package.json
文件中scripts
脚本中修改增加"watch":"npx webpack --watch --config webpack.dev.js"
启动自动编译自动更新
- 安装
webpack-dev-server --save-dev
npm install webpack-dev-server --save-dev
- 在
package.json
文件中scripts
脚本中修改增加// npm run start 启动 "start": "webpack-dev-server --open --config webpack.dev.js"
webpack.config.js
文件module.exports={ // 不建议用于生产环境,更多功能查看webpack相关文档 devServer: { contentBase: './dist', }, }
设置代理服务器
webpack.config.js
文件中// 请求地址是http://rap2.taobao.org/repository/editor?id=241104 // 发送请求时的编写 /* axios.get('api/test').then(res=>{ console.log(res) }) */ module.exports={ devServer: { contentBase: './dist', proxy: { '/api': { target: 'http://rap2.taobao.org:38080', pathRewrite: {'^/api' : '/app/mock/241104/vpi'} } } }, }