webpack4.0基本配置(学习笔记)

基础配置

依赖安装

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代码链接