webpack系列笔记（4）hash

path: path.resolve(__dirname, 'dist')

console.log(__dirname);

打印出来是：/Users/wangrui/Desktop/wpDemos

意思是：在当前根目录上创建一个dist文件夹，并且将打包出来的文件放进去

 

运行脚本：

./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包

 

rm-rf dist 清除dist文件夹

 

entry的用法：

单入口：entry是一个字符串

module.exports = { entry: './src/index.js' }

多入口：entry是一个对象

module.exports = { entry: { app: './src/index.js', adminApp: './src/adminApp.js' } }

 

output多入口的配置方法：

module.exports = { entry: { app: './src/app.js', search: './src/search.js', }, output: { filename: '[name].js', path: __dirname + '/dist' } };

 

webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把他们都转化成有效的模块，并且添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。

 

常见的loader:

babel-loader: 转换ES6、ES7等JS新特性语法

css-loader: 支持.css文件的加载和解析 style-loader: 将css样式以<style></style>形式插入到header标签里面

less-loader: 将less文件转换成css

ts-loader: 将TS转换成JS

file-loader: 进行图片、字体等的打包

raw-loader: 将文件以字符串的形式引入

thread-loader: 多进程打包JS和CSS

 

loaders：用来处理webpack不能解析的文件，通过loaders让webpack能够识别他们

module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rule: [ { test: /\.txt$/, // test匹配规则 use: 'raw-loader' // use指定使用的loader } ] } }

 

plugins: 用于bundle打包文件的优化，资源管理和环境变量的注入。plugins作用于整个构建过程。

 

常见的plugins:

CommonsChunkPlugin: 多模块打包时，如果每个js中都引用了公共的js模块，那么将chunks相同的模块代码提取成公共的js CleanWebpackPlugin: 清理构建目录

ExtractTextWebpackPlugin（MiniCssExtractPlugin）: 将CSS从bundle文件里提取成一个独立的CSS文件

CopyWebpackPlugin: 将文件或者文件夹拷贝到构建的输出目录

HtmlWebpackPlugin: 在dist目录中创建一个html文件去承载输出的bundle

UglifyjsWebpackPlugin: 压缩JS ZipWebpackPlugin: 将打包出来的资源生成一个zip包

 

plugin写法：

module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }

 

mode：development/production/none.

内置功能函数：

 

development: 设置process.env.NODE_ENV的值为development,

开启NamedChunksPlugin和NamedModulesPlugin.

 

production: 设置process.env.NODE_ENV 的值为production.

开启FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和TerserPlugin.

 

none: 不开启任何优化选项

 

babel: 解析ES6

module: { rules: [ { test: /\.js$/, use:'babel-loader' } ] }

 

使用babel配置文件： .babelrc

安装：npm i @babel/core @babel/preset-env babel-loader -D

 

css-loader: 用于加载.css文件，并且转换成commonjs对象

style-loader:将样式通过<style>标签插入到head中去.

 

热更新：webpack-dev-server

- 不刷新浏览器

- 不输出文件，而是放在内存中。性能上比--watch有更大的优势

使用HotModuleReplacementPlugin插件

 

使用webpack-dev-middleware

 

文件指纹：hash

hash: 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改

chunkhash: 和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值

contenthash: 根据文件内容来定义hash,文件内容不变，则contenthash不变

 

JS: 设置output的filename, 使用[chunkhash]:

module.export = { entry: { app: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name][chunkhash:8].js' } }

 

 

css：设置MiniCssExtractPlugin的filename,使用[contenthash]:

module.export = { entry: { app: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name][chunkhash:8].js' }, plugins: [ new MiniCssExtractPlugin({ filename: `[name][contenthash:8].css` }), // new webpack.HotModuleReplacementPlugin() ], }

 

图片的文件指纹设置：设置file-loader的name,使用[hash]

module: { rules: [ { test: /.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader', options: { name: 'img/[name][hash:8].[ext]' } } ] }

 

MiniCssExtractPlugin：

将css文件压缩，且抽离出来成一个css文件，以link的方式引入css文件；

注意：与style-loader有冲突，因为style-loader是将style通过内联样式,以<style></style>标签嵌入在js文件里面

安装mini-css-extract-plugin

使用：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

entry: { app: './src/index.js', search: './src/search.js' },

output: {

path: path.resolve(__dirname, 'dist'),

filename: '[name]_[chunkhash:8].js' },

mode:'production',

module: { rules: [ { test: /.css$/, use: [ // 'style-loader', MiniCssExtractPlugin.loader, 'css-loader' ] }, { test: /.less$/, use: [ // 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ] }, ] },

plugins: [ new MiniCssExtractPlugin({ filename: `[name]_[contenthash:8].css` }), ] }

 

file-loader和url-loader:

对于图片以及字体这种格式的文件，可以使用这两种loader.

file-loader是处理成一种文件格式，打包出来相应的文件类型。图片的话就会打包出来图片文件，字体就会打包出来字体文件。

但是url-loader相对于file-loader更加友好，可以在limit限制以下将图片类型转化为base64流。若小于limit就会转成base64,若大于limit,则仍然以图片文件的格式展示出来。

 

代码压缩：

HTML压缩：使用html-webpack-plugin,设置压缩参数

new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/search.html'), filename: 'search.html', chunks: ['search'], inject: true, minify: { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } })

一个页面对应一个htmlWebpackPlugin. 会打包生成对应的html文件，压缩html, 去除空格换行，压缩css, js

 

 

CSS压缩：使用optimize-css-assets-webpack-plugin, 同时使用cssnano（css预处理）;使用了这个插件之后，css文件大小从162KB压缩到129KB.

plugins: [ new MiniCssExtractPlugin({ filename: `[name]_[contenthash:8].css` }), new OptimizeCSSAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano') }) ]

 

 

JS压缩：内置了uglifyjs-webpack-plugin。可以使用parallel并行压缩. 有内置的UglifyJS压缩。

 

自动清理构建目录：

避免构建前每次都需要手动删除dist，使用clean-webpack-plugin. 默认会删除output指定的输出目录。

 

css3的属性为什么需要前缀？

 

 

PostCss插件autoprefixer自动补齐css3前缀：

使用autoprefixer插件.

安装postcss-loader和autoprefixer这两个插件