Webpack入门

webpack中source map应用当打包后产生的谬误会无奈定位到对应的文件地位，所以应用sourceMap来定位打包前的对应文件地位行将编译后的代码映射回原始源代码 module.exports = { devtool: 'inline-source-map'}webpack中主动编译1.webpack's Watch Mode依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被从新编译，不用手动运行整个构建。 2.webpack-dev-server提供了一个简略的 web 服务器，并且可能实时从新加载(live reloading) npm install --save-dev webpack-dev-server配置如下 module.exports = { devServer: { contentBase: './dist' }}3.webpack-dev-middlewarewebpack-dev-middleware 是一个容器(wrapper)，它能够把 webpack 解决后的文件传递给一个服务器(server)。 webpack-dev-server 在外部应用了它，同时，它也能够作为一个独自的包来应用，以便进行更多自定义设置来实现更多的需要 npm install --save-dev express webpack-dev-middleware模块热更新模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的性能之一。它容许在运行时更新各种模块，而无需进行齐全刷新。启动配置HMR(HotModuleReplacementPlugin) plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ],tree shaking移除打包中没有应用的代码package.json { "sideEffects": false}环境拆散打包提供环境参数确认以后环境 通过与 process.env.NODE_ENV 环境变量关联 将webpack.config.js拆分为 webpack.common.js webpack.dev.js webpack.prod.js 对立文件加不同环境用不同的js文件打包

首先看一些核心概念：1.Entry 从 webpack4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js。 2.Output 输出属性规定哪里创建以及如何命名输出文件。默认./dist/main.js为主输出文件和./dist任何其他生成文件的文件夹。 3.Loaders 使用加载器来预处理文件。（如babel-loader、css-loader） 4.Plugins 插件利用webpack的编译过程执行一些任务，如优化、环境变量配置 5.Mode 通过设定mode参数设置为development，production或者none。启用对应于每个环境的WebPack内置的优化。 6.Browser Compatibility webpack支持所有符合ES5标准的浏览器（不支持IE8及以下版本）。如果要支持旧版浏览器，则需要加载polyfill以支持一些新的语法。 使用init初始化 package.json。 npm init -y安装webpack、 webpack-cli 模块 npm i webpack --save-dev在src目录下新建index.js作为入口文件。此时运行npm run build会发现已经有了dist目录。此时虽然输出了 ./dist/main.js，但是控制台提醒'mode'使用哪种模式（production(生产) 和 development(开发) 模式。）。 webpack.config.js module.exports = { entry: './src/index.js' //需要打包的文件入口}; 开箱即用，webpack不需要您使用配置文件。但是，它将假定您的项目的入口点为src/index并将结果dist/main.js缩小并优化生产。 使用webpack编译的代码中可用的所有方法。使用webpack捆绑应用程序时，您可以选择各种模块语法样式，包括ES6，CommonJS和AMD，推荐使用ES6。 //3种模块化规范//AMDdefine(function() { return function(a, b) { return a + b }})require(['./module/amd'], function(amd) { console.log(amd(1, 2))})//commonJSmodule.exports = function(a, b) { return a + b}let common = require('./module/common')console.log(common(1, 2))//ES6export default function(a, b) { return a + b}import es6 from './module/es6'console.log(es6(1, 2)) webpack.config.js ...

optimization.splitChunkscacheGroups个人感觉splitChunks中除了cacheGroup之外的配置是用来作代码分割的，而cacheGroup是作为模块合并的配置项。cacheGroup内配置优先级高于外面配置，可以理解为先进行分割再进行合并，分割的代码放到哪个缓存组的块中，由优先级决定。可进行如下配置： splitChunks:{ cacheGroups: { common:{ chunks: 'initial', name:'testCommon', // 打包后的文件名 minSize: 0, minChunks: 2 // 重复2次才能打包到此模块 }, vendor: { priority: 1, // 优先级配置，优先匹配优先级更高的规则，不设置的规则优先级默认为0 test: /node_modules/, // 匹配对应文件 chunks: 'initial', name:'testVendor', minSize: 0, minChunks: 1 } } }除了test, priority和reuseExistingChunk只能卸载cacheGroups里，其他属性都能直接写在splitChunks下。 chunks前一步配置中提到chunks一般用initial打包规则，chunks可配置的参数有：all, async和initial三种。具体区别详见：https://juejin.im/post/5c08fe7d6fb9a04a0d56a702 总结一下：initial: 对于匹配文件，非动态模块打包进该vendor,动态模块优化打包async: 对于匹配文件，动态模块打包进该vendor,非动态模块不进行优化打包all: 匹配文件无论是否动态模块，都打包进该vendor webpack4的默认配置中，splitChunks.chunks默认是async,因为webpack更希望将代码中异步引入的部分作为独立模块进行打包，异步的部分在需要时引入，这种懒加载的方式更能提升页面性能。 注：import()可动态加载模块，返回一个Promise。 minSize当模块大于minSize时，进行代码分割 maxSize当模块大于maxSize时，尝试将该模块拆分，如设置maxSize为50*1024，代码中引入了jQuery,jQuery模块大于50kb,于是尝试将jQuery拆分（只是尝试，不一定真能拆分成功） maxAsyncRequests同时加载的模块数，若代码分割设置的是一个库分割成一个模块，打开某个页面时同时需要加载10个库，设置maxAsyncRequests：5，只会将那10个库分割成5个模块 maxInitialRequests最大初始化加载次数，入口文件可以并行加载的最大文件数量。maxInitialRequest和maxAsyncRequests中的'initial'和'async'代表的意思和chunks配置中的'initial'和'async'一样，maxAsyncRequests代表懒加载时最多只能同时引入多少个模块，maxInitialRequests代表非懒加载时最多能同时引入多少模块。假设maxInitialRequests设为3，有文件a.js中，使用了大量import xx from 'xx',a.js依赖的这些非动态加载的模块，最多只会被打包成3个模块。可参考：https://ymbo.github.io/2018/05/21/webpack配置代码分割/#%E4%B8%89%E3%80%81%E7%96%91%E9%9A%BE%E9%85%8D%E7%BD%AE%E9%A1%B9 automaticNameDelimiter打包的chunk名字连接符，如设为'-',生成的chunk文件名为chunk-name.js name是否以cacheGroups中的filename作为文件名 reuseExistingChunk重复使用已经存在的块，若某个模块在之前已经被打包过了，后面打包时再遇到这个模块就直接使用之前打包的模块

webpack-entry正如在入门中提到的，有多种方法可以在 webpack 配置中定义 entry 属性。接下来，将展示配置entry 属性的方法，并解释为什么可能对您有用。 Single Entry(Shorthand) SyntaxUsage: entry: string | Array < string > // webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js'};Object SyntaxUsage: entry: { [ entryChunkName : string ]: Array < string >} webpack.config.js module.export = { entry: { app: './src/app.js', adminApp: './src/adminApp.js' }}对象语法虽然冗长，然而，这是在应用程序中定义条目的最可伸缩的方式。 多页应用 Multi Page Applicationwebpack.config.js module.exports = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' }};这是做什么的？我们告诉 webpack 我们想要3个独立的依赖关系。 为什么？在多页面应用程序中，服务器将为您获取一个新的 HTML 文档。页面将重新加载此新文档并重新下载资源。这就给了我们很多机会去做一些事。 ...

webpack 文档阅读笔记 20190523webupack 六个主要的概念EntryOutputLoadersPluginsModeBrowser CompatibilityEntryentry 指示 webpack 应该使用哪个模块开始构建其内部依赖关系图。 entry 的 默认值是 ./src/index.js。 可以在 webpack.config.js（webpack 的配置文件）里自定义。 // webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js'}Outputoutput 告诉 webpack 在何处派发出它创建的包，以及如何命名这些文件。 output 的默认值 是 ./dist/main.js 可以在 webpack.config.js（webpack 的配置文件）里自定义。 // webpack.config.jsconst path = require('path');module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' }};Loaderswebpack 只能解析 JavaScript 和 JSON 文件。 Loader 允许 webpack 处理其他类型的文件，并将它们转换为可由应用程序使用并添加到依赖关系图中的有效模块。 loaders 在 webpack 配置里有两个属性： test 属性标识应该转换哪个或哪些文件use 属性指示应该使用哪个 loader 进行转换。// webpack.config.jsconst path = require('path');module.exports = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.jsx?$/, use: 'babel-loader' } ] }};Plugins虽然 loader 用于转换某些类型的模块，但是可以利用插件执行更广泛的任务，比如包优化、资产管理和环境变量注入。 ...

一、Webpack是什么？Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.这一段是官网的介绍，翻译过来就是Webpack是一个模块打包工具。它可以打包CommonJs/AMD等浏览器不能直接支持的模块化标准。它可以让你把代码拆分成多个包，可实现按需加载。 二、环境搭建1.node.js和npm这个没什么多说的了，官网下载安装node.js即可，同时npm也会自动装好。 2.npm初始化npm init初始化过程中会让你填许多信息，不想填的话直接在命令后面加上-y会自动生成package.json文件。 3.安装webpackwebpack有两种安装方法，一个是全局安装，一个是本地安装。官方推荐本地安装，实际上本地安装是比较合理的，因为如果两个不同的项目用到的webpack版本不同的话，全局安装无法满足需求。 npm install webpack webpack-cli -Dwebpack-cli的作用是让我们可以在命令行中正确的使用webpack这个命令。 如果想查看本地项目的webpack版本： npx webpack -vnpx这个命令会帮我们在当前项目的node_modules目录下去找webpack。 三、简单示例首先我在npm init后的目录中创建3个文件： index.htmlindex.jsmodule.js// index.jsimport a from './module'console.log(a)// module.jsconst a = 123export default a在index.html引入index.js，然后用浏览器打开，发现报错了。这是因为浏览器无法直接识别ES6 module的语法。 此时我们使用命令： npx webpack index.js会发现根目录下生成了一个dist文件夹，里面有一个main.js文件，在index.html引入这个main.js后再打开浏览器，发现控制台打印了123。 这样我们就看到了webpack的作用，webpack可以帮我们打包浏览器无法识别的模块化语法，让我们可以把代码分割成一个一个的包的形式。 四、配置文件简单介绍在简单示例中我们没有配置任何东西webpack也打包成功了，这是因为webpack有默认的打包配置，当项目变得非常复杂的时候，我们需要许多配置项来帮助我们，默认的配置文件名为webpack.config.js，在根目录下创建： const path = require('path');module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }};这样配置以后使用npx webpack就可以让webpack按照自己期望的样子打包了。 ...

GitHub 完整配置文件地址： https://github.com/yhtx1997/w…由于篇幅过长分三次发布，建议按顺序看[ webpack4 ] 配置属于自己的打包系统教程（一）—— 基础配置篇[ webpack4 ] 配置属于自己的打包系统教程（二）—— 资源配置篇[ webpack4 ] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇环境配置篇主要内容开发环境生产环境分离实时预览，热更新webpack-dev-server 其他常用代码复用处理开发环境和生产环境到了这一步，该讲讲开发环境模式和生产环境模式了开发环境是自己开发时用的，需要有实时编译功能、模块热替换功能（更新文件不用完全更新页面）、错误提示到具体哪个文件几行生产环境是放到线上给用户使用的，需要代码压缩功能配置代码组件化我们先把之前配置好的 webpack 配置文件改下名，改名 webpack.common.js ，意思是开发环境和生产环境都需要的，将代码压缩之类的挪到生产配置下之后安装 webpack-merge ，官方推荐的是为每个环境写单独的 webpack 文件虽然有简单的方法实现但是依然推荐写单独的配置文件，因为在这样的配置方式你可以更清楚你自己在做什么，还可以让你的配置更加个性（自定义）安装 webpack-mergenpm install webpack-merge -D新建开发环境配置我们新建一个 js 文件，命名为 webpack.dev.js ，添加如下代码const merge = require(‘webpack-merge’);//合并配置const common = require(’./webpack.common.js’);//引入公共配置 module.exports = merge(common, { mode: ‘development’,//声明是开发环境 //关于 dev 的配置 })新建开发环境配置我们新建一个 js 文件，命名为 webpack.prod.js 添加如下代码const merge = require(‘webpack-merge’);//合并配置const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin’);//用来压缩 js 代码const common = require(’./webpack.common.js’);//引入公共配置module.exports = merge(common, { mode: ‘production’,//声明是生产环境 //关于 prod 的配置});开发环境实时预览跟着配置并操作的小伙伴可能发现了，每次修改后都需要手动在命令行输入命令，并且还要刷新浏览器才能看到最新的效果 那么现在来解决这两个问题，方法就是使用 webpack-dev-server安装npm install webpack-dev-server -D配置实时预览模块热更新自定义请求代理自定义 ip 及端口注：使用 webpack-dev-server 并不会编译到本地文件，而是放到内存中const merge = require(‘webpack-merge’);const common = require(’./webpack.common.js’);const path = require(‘path’);const webpack = require(‘webpack’); module.exports = merge(common, { mode: ‘development’, plugins: [ new webpack.NamedModulesPlugin(),//模块热更新 new webpack.HotModuleReplacementPlugin()//模块热更新 ], devServer: { contentBase: path.join(__dirname, ‘dist’),//预览的目录，写出口目录的绝对路径 hot: true,//模块热更新 host: ’localhost’,//默认值 也可以改为 127.0.0.1 或者其他 port: 8080, proxy: { ‘/api’: ‘http://localhost:3000’//请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users } } })接下来加入错误提示以及将生成 HTML 的代码从公共配置（ webpack.common.js ）拿到这里 因为开发和生产有些许不一样，我又不知道怎样简单配置，所以开发环境和生产环境我都会放一个生成 HTML 的代码生产环境每次打包都要清理掉旧文件所有代码都要进行压缩重复的 js 代码，需要只有一个就好文件清理从公共配置（ webpack.common.js ）将之前文件清理的代码拿过来放到这里const merge = require(‘webpack-merge’);const common = require(’./webpack.common.js’);const CleanWebpackPlugin = require(‘clean-webpack-plugin’);module.exports = merge(common, { mode: ‘production’, plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title: ‘2048’, template: ‘./src/index.html’, minify: true,//HTML 代码压缩 hash: true }), ],})代码压缩先安装压缩代码的插件npm install uglifyjs-webpack-plugin -D npm install optimize-css-assets-webpack-plugin -D uglifyjs-webpack-plugin 是 js 压缩插件optimize-css-assets-webpack-plugin 是推荐和const UglifyJsPlugin = require(“uglifyjs-webpack-plugin”);const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);复用代码分离假设需要使用 jQuery 来辅助开发，我在 a.js b.js 两个文件都引入了 jQuery ，将 a.js b.js 打包成 a.min.js b.min.js ，这时看他们的体积会比原来大很多，且 a 和 b 的代码中都包含完整的 jQuery 代码为了解决这种情况，我们需要将 jQuery 这种复用的代码分离到单独的文件在将环境设置为生产环境时默认开启了很多功能，其中 SplitChunksPlugin 就是用于避免重复依赖的在我们不配置时 默认配置是这样的 optimization: { splitChunks: { chunks: ‘async’, minSize: 30000, minChunks: 1, } }chunks: 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async 改成 all 支持所有的minSize: 这个文件最少是多少才去优化，默认为 30000 实际测试是文件大于 30 kb，在 31kb时开始优化minChunks: 最少引用几次才去优化，默认为1 实际测试为在只引用一次的情况不优化，只有大于它才优化注： 还有其他属性个人感觉不常用就没写，了解更多可以看这里最终代码汇总最终公共配置 webpack.common.js 代码如下const path = require(‘path’);const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);module.exports = { entry: { 512:’./src/js/512.js’, 1024:’./src/js/1024.js’, 2048:’./src/js/2048.js’, }, plugins: [ new MiniCssExtractPlugin({ filename: “css/[name].css” }) ], output: { filename: “js/[name].js”, path: path.resolve(__dirname, ‘dist’) }, module: { rules: [ { test: /.js$/, exclude: /(node_modules|bower_components)/, use: { loader: ‘babel-loader’, options: { presets: [’@babel/preset-env’] } } }, { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘postcss-loader’, ‘sass-loader’, ] }, { test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ ‘file-loader’ ] }, { test: /.(csv|tsv)$/, use: [ ‘csv-loader’ ] }, { test: /.xml$/, use: [ ‘xml-loader’ ] } ] },}最终开发环境 webpack.dev.js 代码如下const merge = require(‘webpack-merge’);const common = require(’./webpack.common.js’);const path = require(‘path’);const webpack = require(‘webpack’);const HtmlWebpackPlugin = require(‘html-webpack-plugin’); module.exports = merge(common, { mode: ‘development’, plugins: [ new HtmlWebpackPlugin({ title: ‘2048’, template: ‘./src/index.html’, minify: false, hash: true }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], devtool: ‘inline-source-map’, devServer: { contentBase: path.join(__dirname, ‘dist’), hot: true, host: ’localhost’, port: 8080, proxy: { ‘/api’: ‘http://localhost:3000’ } } })最终生产环境 webpack.prod.js 代码如下const merge = require(‘webpack-merge’);const common = require(’./webpack.common.js’);const UglifyJsPlugin = require(“uglifyjs-webpack-plugin”);const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);const HtmlWebpackPlugin = require(‘html-webpack-plugin’);const CleanWebpackPlugin = require(‘clean-webpack-plugin’);module.exports = merge(common, { mode: ‘production’, plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title: ‘2048’, template: ‘./src/index.html’, minify: true, hash: true }), ], optimization: { splitChunks: { chunks: ‘all’ }, minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }), new OptimizeCSSAssetsPlugin({}) ], }});npm 项目配置代码 package.json 代码如下{ “name”: “2048”, “version”: “1.0.0”, “description”: “”, “private”: true, “main”: “index.js”, “scripts”: { “dev”: “webpack-dev-server –open –config webpack.dev.js”, “build”: “webpack –config webpack.prod.js” }, “keywords”: [], “author”: “”, “license”: “ISC”, “dependencies”: { “webpack”: “^4.28.3” }, “devDependencies”: { “@babel/core”: “^7.2.2”, “@babel/preset-env”: “^7.2.3”, “autoprefixer”: “^9.4.3”, “babel-loader”: “^8.0.4”, “clean-webpack-plugin”: “^1.0.0”, “css-loader”: “^2.1.0”, “csv-loader”: “^3.0.2”, “extract-text-webpack-plugin”: “^4.0.0-beta.0”, “file-loader”: “^3.0.1”, “html-webpack-plugin”: “^3.2.0”, “mini-css-extract-plugin”: “^0.5.0”, “node-sass”: “^4.11.0”, “optimize-css-assets-webpack-plugin”: “^5.0.1”, “postcss”: “^7.0.7”, “postcss-loader”: “^3.0.0”, “sass-loader”: “^7.1.0”, “style-loader”: “^0.23.1”, “uglifyjs-webpack-plugin”: “^2.1.1”, “webpack-cli”: “^3.1.2”, “webpack-dev-server”: “^3.1.14”, “webpack-merge”: “^4.1.5”, “xml-loader”: “^1.2.1” }} ...

GitHub 完整配置文件地址： https://github.com/yhtx1997/webpack4-Instance 由于篇幅过长分三次发布，建议按顺序看[ webpack4 ] 配置属于自己的打包系统教程（一）—— 基础配置篇[ webpack4 ] 配置属于自己的打包系统教程（二）—— 资源配置篇[ webpack4 ] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇资源配置篇资源配置篇ES6 -> ES5提取 css 到单独文件css 浏览器兼容前缀补全css 代码压缩使用 sass使用 HTML 模板清理旧的打包文件静态资源加载与解析通过下面的配置 可以在 js 里引入相应的文件，然后进行解析 也可以直接解析相应的文件配置 babel 将 ES6 转换为兼容性语法（低版本语法 ES5 或 ES3）安装 babel-loadernpm install -D babel-loader @babel/core @babel/preset-env babel-loader：使用 Babel 转换 JavaScript 依赖关系的 Webpack 加载器@babel/core： 将 ES6 代码转换为 ES5@babel/preset-env： 决定使用哪些 api 为旧浏览器提供现代浏览器的新特性module: { rules: [ { test: /.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: ‘babel-loader’, options: { presets: [’@babel/preset-env’] } } } ]}加载 css安装提取 css 相关的 npm 包npm install style-loader css-loader -D提取 css 相关配置const path = require(‘path’);module.exports = { entry: { 2048: ‘./src/js/2048.js’, 1024: ‘./src/js/1024.js’, 512: ‘./src/js/512.js’ }, output: { filename: “[name].js”, path: path.resolve(__dirname, ‘dist’) }, module: { rules: [ { test: /.css$/, //匹配所有以 .css 为后缀的文件 use: [//使用以下loader来加载 ‘style-loader’, ‘css-loader’ ] } ] }}安装 sass开发 css 现在多数使用 sass 和 lass ，所以配置下 sass 相应的安装 lass 只需要把 sass-loader 切换为 less-loadernpm install sass-loader node-sass -D配置{ test: /.scss$/, use: [ “style-loader”, “css-loader”, “sass-loader” ]}CSS 分离成文件方案一 安装 extract-text-webpack-plugin方案一简单写下，推荐方案二npm install extract-text-webpack-plugin -Dextract-text-webpack-plugin 提取 css 到单独文件配置const ExtractTextPlugin = require(“extract-text-webpack-plugin”);plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title:‘2048’, template: ‘./src/index.html’, minify:true, hash:true }), new ExtractTextPlugin({ filename: ‘css/[name].css’ }),],module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [“css-loader”,“sass-loader”] }) }, ]}方案二 安装 MiniCssExtractPlugin 推荐与extract-text-webpack-plugin相比异步加载没有重复的编译（性能）更容易使用特定于CSSnpm install mini-css-extract-plugin postcss-loader autoprefixer postcss optimize-css-assets-webpack-plugin -Dmini-css-extract-plugin 提取 css 到单独文件autoprefixer 浏览器兼容前缀补全（例如 -webkit-）optimize-css-assets-webpack-plugin 代码压缩配置const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), new OptimizeCSSAssetsPlugin({}) ] },plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title:‘2048’, template: ‘./src/index.html’, minify:true, hash:true }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: “css/[name].css” })],module: { rules: [ { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘postcss-loader’, ‘sass-loader’, ] }, ] }这里需要注意的是需要新建一个 postcss.config.js 文件,用来配置自动加前缀module.exports={ plugins: [ require(‘autoprefixer’)({ /* …options */ }) ]}加载数据数据文件包括 JSON 文件，CSV、TSV 和 XML JSON 默认就是支持的，所以如果需要处理剩下的使用下面的方法就可以了安装提取 数据 相关的 npm 包npm install csv-loader xml-loader -D安装提取 数据 相关的 npm 包{ test: /.(csv|tsv)$/, use: [ ‘csv-loader’ ]},{ test: /.xml$/, use: [ ‘xml-loader’ ]}加载其他资源加载其他静态资源都可以使用 file-loader 来加载npm install file-loader -D加载图片{ test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ]}加载字体{ test: /.(woff|woff2|eot|ttf|otf)$/, use: [ ‘file-loader’ ]}设定 HtmlWebpackPlugin当我们真正应用我们写的代码时，需要我们新建 HTML ，并且需要我们手动的在 HTML 里引入，使用 HtmlWebpackPlugin 可以让我们不用每次都新建 HTML 以及 手动去引入我们的代码 它会帮我们每次运行 webpack 时新建一个 HTML 并引入所有打包好的 js css安装npm install html-webpack-plugin -D配置 HTML 模板const HtmlWebpackPlugin = require(‘html-webpack-plugin’);//引入HtmlWebpackPlugin//官网是将其放到了入口 entry 与出口 output 之间plugins: [ new HtmlWebpackPlugin({ title: ‘Output Management’，//表示 HTML title 标签的内容 template: ‘./src/index.html’,//表示模板路径 minify: true,//压缩代码 hash: true//加上哈希值来达到去缓存的目的 })]清理 ./dist 文件夹如果我们使用了哈希值来命名我们的文件，那么每次更该内容都会生成新的文件，同时旧的文件依然存在，这样的话一个是乱，一个是浪费 我们可以使用 CleanWebpackPlugin 在每次打包时都会将之前的旧文件清除掉安装npm install clean-webpack-plugin -D配置const CleanWebpackPlugin = require(‘clean-webpack-plugin’);plugins: [ new CleanWebpackPlugin([‘dist’]),//删除dist new HtmlWebpackPlugin({ title: ‘Output Management’，//表示 HTML title 标签的内容 template: ‘./src/index.html’,//表示模板路径 minify: true,//压缩代码 hash: true//加上哈希值来达到去缓存的目的 })] ...

GitHub 完整配置文件地址： https://github.com/yhtx1997/webpack4-Instance 由于篇幅过长分三次发布，建议按顺序看[ webpack4 ] 配置属于自己的打包系统教程（一）—— 基础配置篇[ webpack4 ] 配置属于自己的打包系统教程（二）—— 资源配置篇[ webpack4 ] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇基础配置篇主要内容安装 webpack4目录初始化配置初始化入口及多入口配置出口配置安装 webpack4安装 webpack 前请确保已安装 nodejs 和 npm新建 npm 项目npm init -y这里的init表示初始化一个 npm 项目， -y 表示全部选 yes，不加的话会提示输入一些项目信息，比如项目名，版本号，作者…安装 webpack4npm install webpack webpack-cli webpack-dev-server -D这其实是一条合并的命令，拆开就是npm install webpack -Dnpm install webpack-cli -Dnpm install webpack-dev-server -Dinstall 是安装的意思； -D 表示安装到本地开发环境，不使用全局安装是因为每个项目可能用的 webpack 版本不一样导致冲突第一条安装的是 webpack 的核心文件，就好比是安装包第二条是让 webpack 支持类似 npm run dev 这种命令行命令第三条安装的是可以使 webpack 支持实时编译的拓展包初始化 npm 配置及文件现阶段的目标是让它能运行起来 现在目录下应该有一个文件夹，两个 .josn 文件node_modules 用来存放所有安装的 npm 包package.json 在这里配置 npm run 的脚本，以及包含项目信息，安装了哪些包package-lock 详细的包的版本来源，确保项目所有开发人员用的都是一个版本调整 package.json官方推荐移除文件中的入口配置，这样可以防止意外发布你的代码。“main”: “index.js"并加上私有属性配置"private”: true运行webpack 可以用在命令行输入 npx webpack 但是这样的运行方式在配置了开发环境和生产环境时，再运行需要写很多参数 所以添加一个 npm 脚本,之后运行 输入 npm run test 即可，有参数后在后边追加即可 “test”: “webpack"最后看起来像这样新建入口文件及生成出口文件在 webpack 4 中，可以无须任何配置使用，做完上边的操作后可以在命令行输入 npm run test 运行 webpack（这里的 test 是在上边 scripts 里自己定义的），但是会显示这样的结果。这是因为入口文件不存在，webpack 默认是将当前目录下的 ./src/index.js 当做要打包的文件（入口），新建一下 src 目录和 index.js 文件，就可以正常了。这时会生成一个 dist 目录以及目录里有一个 main.js，这是默认的打包好的文件及目录（出口），这样一个 webpack 算是初始化完成了。注：最终发布时如果只需要一个 js，那么开发时 index.js 里推荐是只用来引入其他 js 文件（import）。在截止 2018年12月31日 据我所知道的目前 import 和 export 还只是概念上的标准， js 还不能原生支持 import 和 export ，大家能使用是因为配置了 babel ，通过 babel 进行编译，使其变成 node.js 的代码，使其可以将这条命令视为加载模块。 nodejs 采用 CommonJS规范，关于 ES6 这方面的可以看 ES6 Module 的语法。webpack4 入口出口配置在上面也说了 webpack4 现在可以无需使用任何配置文件就可以使用，但是有些东西还是弄成自己喜欢的比较好新建配置文件在当前目录下新建一个 webpack.config.js 文件，并写入代码const path = require(‘path’);//[1]module.exports = { //[2]};[1] 是引入 node 的 path 模块，这样就可以处理文件与目录的路径，处理路径是因为 windows 系列和 Linux 系列在路径的表示上不太一样。[2] 是对外暴露大括号 {} 中的内容，用来写我们自定义的配置注：关于配置文件名，wepack4 默认是会引入 ./webpack.config.js ，如果想自己改名字的话可以在命令行输入一下代码，其中 webpack –config 是必须的， my.config.js 是自己自定义的配置文件的路径webpack –config my.config.js入口配置为了能证明入口确实改了有效果，我将 ./src/index.js 的文件名改为 2048.js，并放到./src/js/2048.js ；并修改代码const path = require(‘path’);module.exports = { entry: “./src/2048.js”//add};在不加上面代码时会报之前的找不到入口的错误，加了以后会显示正常输出了，并且 ./dis 下会多一个 2048.js 的文件，多入口配置entry 不光能赋值绝对路径的字符串，还能赋值多个路径的数组或对象entry: ‘./src/2048.js’//单入口 字符串传参entry: [’./src/js/2048.js’,’./src/js/1024.js’,’./src/js/512.js’]//多入口 数组传参entry: {//多入口 对象传参 2048: ‘./src/js/2048.js’, 1024: ‘./src/js/1024.js’, 512: ‘./src/js/512.js’ }出口配置出口跟入口不太一样，入口可以有很多，但是只有一个输出配置。output: { filename: ‘2048.js’, path: ‘C:/Users/GengShaojing/Desktop/2048/dist’}filename 打包后文件的文件名。path 打包后文件的的绝对路径。多入口多输出文件output: { filename: ‘[name].js’,//[1] path: path.resolve(__dirname, ‘dist’)//[2]}[1] [name] 表示使用 entry 传递过来的文件的文件名或者对象的 key 值[2] __dirname 指向当前文件（webpack 配置文件）的绝对路径， path.resolve 是解析路径并在路径后加上 dist每次修改后生成不一样的文件名output: { filename: “[name].[chunkhash].js”, path: path.resolve(__dirname, ‘dist’)}filename 支持以下几个属性，且可以共存[name] 模块名称 就是之前说的文件名或者对象的 key 值[id] 模块标识符 应该是入口传入顺序的下标值从 0 开始[hash] 模块标识符的哈希值 这个我理解的不太清楚，只知道他可以生成字符串[chunkhash] 内容的哈希值 根据内容生成字符串[contenthash] 提取的内容生成的哈希值 根据提取的内容生成字符串注：官方推荐 [name] 加上 [chunkhash] 的模式注：哈希值就是用算法提取的标识信息，相当于人和录入指纹，哈希值就是人录入指纹的机器，最后的字符串就是指纹 ...