欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

github代码链接

相关标签: webpack