webpack4.0基本配置(学习笔记)
程序员文章站
2022-07-12 19:55:13
...
基础配置
依赖安装
npm install webpack webpack-cli --save-dev
npm install webpack-dev-server --save-dev
- webpack.config.js中的mode选项一定要配置,不能配置"",如果不配置那就不要写mode这个选项
- entry 配置入口,output配置出口
- output.filename下支持指定输出文件名,文件名的规则可随心所欲的拼接
模版 | 描述 |
---|---|
[hash] | 模块标识符(module identifier)的 hash |
[chunkhash] | chunk 内容的 hash |
[name] | 模块名称 |
[id] | 模块标识符(module identifier) |
[query] | 模块的 query,例如,文件名 ? 后面的字符串 |
配置html模版
依赖安装
npm install html-webpack-plugin -D
- 引入插件html-webpack-plugin
- plugins配置项是一个数组,可以写入插件,实例化后的插件传两个参数,选择的模版和打包后的bundle.js是否添加hash
配置CSS文件(包含less)
依赖安装
npm install css-loader style-loader -D
npm install less less-loader -D
- css-loader是负责解释require()和import后再解析
- style-loader是将样式放入 style标签
- less-loader则是将less解析为css
- 配置css的loader时,use的顺序是从右向左 所以顺序应该为[“style-loader”,“css-loader”,“less-loader”]
拆分css
安装依赖
npm install extract-text-webpack-[email protected] -D
- 到目前为止,该插件的稳定版还不支持webpack4.0 ,所以安装他的beta版本
- 拆分css会让css以link标签方式引入,而非直接放入style标签
为某些css样式增加厂商前缀
安装依赖
npm i -D postcss-loader
npm install autoprefixer -D
- 建议使用autoprefixer插件
- 需要增加postcss.config.js配置文件
学习webpack的第二章
清空dist文件夹
安装依赖
npm install clean-webpack-plugin -D
- reqire引入插件并再plugin项配置
- 这样每次运行npm run build就不会重复在dist文件夹内生成文件了。
webpack-dev-server
module.exports = {
mode: 'development',
devServer: { //配置此静态文件服务器,可以用来预览打包后项目
inline:true, //打包后加入一个websocket客户端
contentBase: path.resolve(__dirname, 'dist'), //开发服务运行时的文件根目录
host: 'localhost', //主机地址
port: 8086, //端口号
compress: true //开发服务器是否启动gzip等压缩
open:true, // 自动打开浏览器
},
entry: './src/index.js',
}
- 这个用于方便本地调试,上一章已经安装了依赖,直接配置即可
图片资源配置
安装依赖
npm install url-loader file-loader -D
npm install html-withimg-loader -D
- file-loader 可以解析项目中url的引入,根据配置将图片copy到相应的路径,修改打包后文件引入路径,使之指向正确的地方
- url-loader 是基于file-loader的另一层封装,可以在图片小于limit时使之转为base64,这样可以减少图片http的请求
- 不仅仅图片,媒体资源和字体文件也可以用这个loader
- 除了css内和js内引入图片,html文件内使用img标签或者内联样式的background来引入图片,可以使html-withimg-loader来处理这种情况(这个loader在npm两年一直没有更新,而且vue脚手架也没有这个loader)
ES6转义
安装依赖
npm install babel-core babel-loader babel-preset-env -D
- 这三个包用来将ES6转换为ES5,同时方便兼容低版本浏览器的同时也不影响使用ES6语法
- babel-preset-env功能强大,可以指定兼容浏览器,可以单独建一个.babelrc文件
Hot Module Replacement 热模块更新
- webpack.config.js 引入 webpackrequire(“webpack”)
- devServe中配置hot项为true 可选择配置hotOnly
- 配置插件 new webpack.HotModuleReplacementPlugin()
- 实现无刷新更新(配置热更新后发现修改html文件不会进行自动刷新了)
尝试vue
- 需要插件 vue-loader vue-style-loader
上一篇: Dubbo之调度Dispatcher
下一篇: 关于生产者消费者问题的OpenMP实现