webpack4 html 引入css,webpack 4.x 配置理解

webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，会在内部构建一个依赖图，此依赖图会映射项目所需要的每个模块，并且生成一个或者多个bundle。

一、入口(entry)

入口起点是构建其内部 依赖图的开始，进入后webpack 会找出项目所依赖的块和库，默认起点./src/index.js。

webpack.config.js

1、简单规则：每个HTML页面都有一个入口起点。单页面应用(SPA)：一个入口起点，；多页面应用(MPA)：多个入口起点

2、命名：如果传入一个字符串或者字符串数组，chunk会被命名为main。如果传入一个对象，则每个键是chunk的名称，该值描述了chunk的入口起点。

二、输出(output)

输出属性是告诉webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件，主要输出文件默认输出位置：./dist/main.js，其他文件默认放置在 ./dist 文件夹中。

webpack.config.js

1、注：filename不会影响那些「按需加载 chunk」的输出文件。对于这些文件，请使用 output.chunkFilename 选项来控制输出。

2、[hash] 和 [chunkhash] 的长度可以使用 [hash:16](默认为20)来指定。可通过指定output.hashDigestLength 在全局配置长度。

3、output.pathinfo在 development 模式时的默认值是 true，而在 production 模式时的默认值是 false。在生产环境(production)下，不应该使用

4、output.path 中的 URL 以 HTML 页面为基准

5、js/[name].[contenthash].js：路劲加文件名

三、loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。注意，loader 能够 import 导入任何类型的模块(例如 .css 文件)，可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中 loader 有两个属性：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

2. use 属性，表示进行转换时，应该使用哪个 loader。

webpack.config.js

1、mini-css-extract-plugin是将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap；通过配合html-webpack-plugin插件的使用，生成的html就会自动引入css文件啦。只能用在webpack4中，对比另一个插件 extract-text-webpack-plugin有点:

①. 异步加载        ②. 不重复编译，性能更好         ③. 更容易使用

2、以上的配置中，对一个对象定义了rules属性，里面包含了两个属性，意味着告诉webpack编译器如下信息：“当碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 使用 raw-loader 转换一下

3、在 webpack 配置中定义 rules 时，要定义在 module.rules

4、使用正则表达式匹配文件时，你不要为它添加引号。也就是说，/\.txt$/ 与 '/\.txt$/'/ "/\.txt$/" 不一样。

四、插件(plugin)

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到plugins 数组中。

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例

webpack.config.js

一、4.1 常用插件

①用途：用于编译 Webpack 项目中的 html 类型的文件，为应用程序生成 HTML 一个文件。

②用法：new HtmlWebpackPlugin({

filename:'index.html',

template:resolvePath('../app/src/index.html'),

inject:true

})

③当未定义此插件的入口时，默认只为 index.html,输出同样是 index.html。

④可以为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

⑤单页面可以生成一个html文件入口；配置N个html-webpack-plugin可以生成N个页面入口

⑥重构入口html，动态添加< link>和< script>，在以hash命名的文件上非常有用，因为每次编译都会改变

⑦配置项title：生成的html文档的标。并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，题

filename：输出文件的文件名称，默认为index.html。还可以为输出文件指定目录位(例如'html/index.html')置

template:  本地模板文件的位置[为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: './index.html'，若没有为.html指定任何loader就使用ejs-loader

templateContent：可以指定模板的内容，不能与template共存。

inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同( 1. true或者body：所有JavaScript资源插入到body元素的底部   2. head: 所有JavaScript资源插入到head元素中    3. false： 所有静态资源css和JavaScript都不会注入到模板文件中)

favicon: 添加特定favicon路径到输出的html文档中

hash: true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值

chunks: 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中

excludeChunks: none | auto| function，默认auto； 允许指定的thunk在插入到html文档前进行排序。> function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序

xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签

cache:  true|fasle, 默认true； 如果为true表示在对应的thunk文件修改后就会emit文件

showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。

2、ProvidePlugin：

①用途：$出现，就会自动加载模块；$默认为'jquery'的exports。

②用法：new webpack.ProvidePlugin({ $: 'jquery', })

3、webpack.IgnorePlugin：

①用途：定义全局常量

②用法：new webpack.DefinePlugin({

'process.env': {

NODE_ENV:JSON.stringify(process.env.NODE_ENV)

},

PRODUCTION: JSON.stringify(PRODUCTION),

APP_CONFIG: JSON.stringify(appConfig[process.env.NODE_ENV]),

}),

4、IgnorePlugin：

①用途：忽略regExp匹配的模块,排除部分不需要编译的文件

②用法：new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/,/node_modules$/)

①用途：分离css文件

②用法：new MiniCssExtractPlugin({

filename: 'css/[name].[contenthash:6].css',

})

①Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

五、模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。module.exports = { mode: 'production'};

六、浏览器兼容性(browser compatibility)

webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill

七、解析(resolve)

模块解析(module resolution) : resolver 是一个库(library)，用于帮助找到模块的绝对路径。resolver 帮助 webpack 从每个如 require/import 语句中，找到需要引入到 bundle 中的模块代码。 当打包模块时，webpack 使用 enhanced-resolve 来解析文件路径。

解析:该属性的作用是设置模块如何被解析

webpack.config.js

一、常用配置项

1、esolve.alias：设置别名, 在vue中都是 @代表src目录。 也可以在key尾部添加$,精确匹配某一文件module.exports = {

resolve: {

alias: {

Utilities: path.resolve(__dirname, 'src/utilities/'),

Templates: path.resolve(__dirname, 'src/templates/')

}

}

//替换「在导入时使用相对路径」这种方式，就像这样：

import Utility from '../../utilities/utility';

//可以这样使用别名:

import Utility from 'Utilities/utility';

}

2、resolve.extensions：自动解析确认的扩展,默认值为:extensions: [.wasm', '.mjs','.js', '.json'] .能够使用户在引入模块时不带扩展：import File from '../path/to/file';

3、resolve.mainFiles：解析目录时要使用的文件名。 当你引入路径只精确到一个文件夹时, 引入文件夹中的哪个.js文件, 默认为: indexmodule.exports = {

resolve: {

mainFiles: ['index']

}

};

4、resolve.modules：告诉 webpack 解析模块时应该搜索的目录。绝对路径和相对路径都能使用，但是之间有一点差异。

①使用绝对路径，将只在给定目录中搜索。module.exports = {

resolve: {

modules: ['node_modules']

}

};

②如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：

module.exports = {

resolve: {

modules: [path.resolve(__dirname, 'src'), 'node_modules']

}

};

5、resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 falseimport foo from './foo' // ./foo.js 中的.js可以省略

6、resolve.enforceModuleExtension：对模块是否需要使用的扩展(例如 loader)。boolean: false默认

八、优化(optimization)

从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，不过所有的优化还是可以手动配置和重写。

webpack.config.js

一、常用配置项

1、optimization.minimize：boolean，production 模式下，这里默认是 true。

告知 webpack 使用 TerserPlugin 压缩 bundle。module.exports = {      optimization: {        minimize: false      }    };

2、optimization.minimizer： [] and or [function (compiler)]

允许你通过提供一个或多个定制过的 TerserPlugin 实例，覆盖默认压缩工具(minimizer)const TerserPlugin = require('terser-webpack-plugin');

module.exports = {

optimization: {

minimizer: [

new TerserPlugin({  // 压缩js

cache: true,

parallel: true,  // 开启多进程，提升压缩速度

sourceMap: true,  // 生成map文件

}),

new OptimizeCSSAssetsPlugin({}),    // 压缩css

],

}

};

3、optimization.splitChunks：object

对于动态导入模块，默认使用 webpack v4+ 提供的全新的通用分块策略

九、性能(performance)

可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」。配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。

一、常用配置项

1、performance.hints：false | "error" | "warning"，此属性默认设置为 "warning"。

①给定一个创建后超过 250kb 的资源：hints: false

②不展示警告或错误提示。：hints: 'warning'

③将展示一条警告，通知你这是体积大的资源。在开发环境，我们推荐这样。：hints: 'error'

2、performance.maxEntrypointSize：int

①此选项根据入口起点的最大体积，控制 webpack 何时生成性能提示。默认值是：250000 (bytes)。module.exports = {

performance: {

maxEntrypointSize: 400000

}

};

十、devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。切勿同时使用 devtool 选项和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。