本文共 7287 字,大约阅读时间需要 24 分钟。
本人是个新手,写下博客用于自我复习、自我总结。 如有错误之处,请各位大佬指出。 学习资料来源于:尚硅谷
entry的用法,目前已经都遇到过了,一共三种。
entry: './src/js/index.js'
单入口 它会打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 。 (就是假如在output里,没有指定名字:filename: '[name].js'
, 那么默认名是main)。entry: ['./src/index.js', './src/count.js']
多入口 所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件。 这种用法之前在HMR中用到过,当时是通过修改entry入口,将html文件引入。 目前,这种用法只用在HMR功能中,让html热更新生效。entry: { index: './src/js/index.js', test: './src/js/test.js'}
组合用法:
entry: { index: ['./src/index.js', './src/count.js'], add: './src/add.js'}
const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { // 文件名称(指定名称+目录) filename: 'js/[name].js', // 输出文件目录(将来所有资源输出的公共目录) path: resolve(__dirname, 'build'), // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg' publicPath: '/', chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称 // library: '[name]', // 整个库向外暴露的变量名 // libraryTarget: 'window' // 变量名添加到哪个上 browser // libraryTarget: 'global' // 变量名添加到哪个上 node // libraryTarget: 'commonjs' }, plugins: [new HtmlWebpackPlugin()], mode: 'development'};
这其中publicPath: '/'
,一般用于生产环境,它会在路径前加一个前缀,比如,路径会从’imgs/a.jpg’ 变成 ‘/imgs/a.jpg’ ,这两种路径还是有区别的,加斜杠会以当前服务器地址为补充,去服务器根目录下寻找这么一个目录,不加斜杠是在当前路径下找。
<script type="text/javascript" src="/js/main.js"></script></body>
library
一般用来暴露一些库,通常结合dll,将某些库单独打包,然后引入使用,平常不用。
chunkFilename: 'js/[name]_chunk.js'
可以修改非入口chunk的名称
index.js
import count from './count';console.log('index.js文件加载了~');import('./add').then(({ default: add }) => { console.log(add(1, 2));});console.log(count(3, 2));
add.js
function add(x, y) { return x + y;}export default add;
count.js
function count(x, y) { return x - y;}export default count;
效果:
下面只写比较常用的,也是之前用的比较多的,但不是没有其他的用法,有需要查看官方文档就好了。
module: { rules: [ // loader的配置 { test: /\.css$/, // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: /\.js$/, // 排除node_modules下的js文件 exclude: /node_modules/, // 只检查 src 下的js文件 include: resolve(__dirname, 'src'), // 优先执行 enforce: 'pre', // 延后执行 // enforce: 'post', // 单个loader用loader loader: 'eslint-loader', options: { } }, { // 以下配置只会生效一个 oneOf: [] } ]}
这个resolve不是之前取路径那个resolve,这个之前没用过,resolve是用来解析模块的规则。
webpack.config.js
const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filename: 'js/[name].js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [new HtmlWebpackPlugin()], mode: 'development', // 解析模块的规则 resolve: { // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示 alias: { $css: resolve(__dirname, 'src/css') }, // 配置省略文件路径的后缀名 extensions: ['.js', '.json', '.jsx', '.css'], // 告诉 webpack 解析模块是去找哪个目录 modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] }};
对于modules用法,我们可以这么用,modules: ['node_modules']
,它就会告诉 webpack 解析模块是去找哪个目录,如果在本级找不到就会去上一级目录寻找。因为之前我提到过,我为了引入的方便,我把需要的文件都下载到了项目的最外层,所以在这里我就通过寻找路径的resolve精确寻找。为了避免找不到,就多加了一个查找,即:modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
通过设置alias,设置了$css,即存放css的路径,那么在js中引入的时候,就可以如下面的index.js的方式引入(也就避免了,如果存放css的路径层级比较多,在js中比较累赘的问题,当然缺点就是只看js文件,你不知道这个css样式是从哪里引入的)。
同时通过设置extensions,可以让我们引入时,省略文件路径的后缀名。当要引入时,它会去指定的目录下,先寻找js后缀有没有这个文件,然后是json后缀、jsx后缀、css后缀,以此类推。找不到就会报错。通常情况下,这里不省略css后缀名,毕竟它是从前向后找,而且有可能会出现命名相同的情况,可能会出现意想不到的问题,这里只是做个示范。如下面的index.js。
index.js
import '$css/index';
index.css
html,body { height: 100%; background-color: pink;}
注意:devServer只用于开发环境。
devServer: { // 运行代码的目录 contentBase: resolve(__dirname, 'build'), // 监视 contentBase 目录下的所有文件,一旦文件变化就会 reload watchContentBase: true, watchOptions: { // 忽略文件 ignored: /node_modules/ }, // 启动gzip压缩 compress: true, // 端口号 port: 5000, // 域名 host: 'localhost', // 自动打开浏览器 open: true, // 开启HMR功能 hot: true, // 不要显示启动服务器日志信息 clientLogLevel: 'none', // 除了一些基本启动信息以外,其他内容都不要显示 quiet: true, // 如果出错了,不要全屏提示~ overlay: false, // 服务器代理 --> 解决开发环境跨域问题 proxy: { // 一旦devServer(5000)服务器接受到 /api/xxx 的请求,就会把请求转发到另外一个服务器(3000) '/api': { target: 'http://localhost:3000', // 发送请求时,请求路径重写:将 /api/xxx --> /xxx (去掉/api) pathRewrite: { '^/api': '' } } }}
optimization之前在代码分割中用过。
注意:只用于生产环境。像当初代码分割一样,这里依然给文件名字加了哈希值,依然会出现以前提到过的问题,就是当我们修改a文件时,a的哈希值就会发生改变,而index因为引入a文件,所以它的哈希值也发生了变化。现在我们不想让index的哈希值也发生改变,所以使用到了runtimeChunk。因为设置了哈希值,所以相当于index文件是根据哈希值引入其他文件的,现在runtimeChunk就会将当前模块的记录其他模块的hash单独打包为一个文件,这样一来a文件改变,只会改变runtimeChunk文件中的哈希值。
当webpack版本在4.2.6及以上时,现在用库terser去压缩js和css,当我们用默认配置去压缩,就不需要修改minimizer中的内容。要修改的话,先下载这个库:
webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const TerserWebpackPlugin = require('terser-webpack-plugin')module.exports = { entry: './src/js/index.js', output: { filename: 'js/[name].[contenthash:10].js', path: resolve(__dirname, 'build'), chunkFilename: 'js/[name].[contenthash:10]_chunk.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [new HtmlWebpackPlugin()], mode: 'production', resolve: { alias: { $css: resolve(__dirname, 'src/css') }, extensions: ['.js', '.json', '.jsx', '.css'], modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] }, optimization: { splitChunks: { chunks: 'all' // 默认值,不用写: /* minSize: 30 * 1024, // 分割的chunk最小为30kb maxSize: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量 maxInitialRequests: 3, // 入口js文件最大并行请求数量 automaticNameDelimiter: '~', // 名称连接符 name: true, // 可以使用命名规则 cacheGroups: { // 分割chunk的组 // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js // 满足上面的公共规则,如:大小超过30kb,至少被引用一次。 vendors: { test: /[\\/]node_modules[\\/]/, // 优先级 priority: -10 }, default: { // 要提取的chunk最少被引用2次 minChunks: 2, // 优先级 priority: -20, // 如果当前要打包的模块,和之前已经被提取的模块是同一个,就会复用,而不是重新打包模块 reuseExistingChunk: true } }*/ }, // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime // 解决:修改a文件导致b文件的contenthash变化 runtimeChunk: { name: entrypoint => `runtime-${ entrypoint.name}` }, minimizer: [ // 配置生产环境的压缩方案:js和css new TerserWebpackPlugin({ // 开启缓存 cache: true, // 开启多进程打包 parallel: true, // 启动source-map sourceMap: true }) ] }};
a.js
export function add(x, y) { return x + y;}
index.js
import(/* webpackChunkName: 'a' */'./a.js').then(({ add }) => { console.log(add(1, 2));});
转载地址:http://klyki.baihongyu.com/