webpack—教程（概念讲解 及 配置选项）
一、webpack配置项：https://www.jianshu.com/p/43fa9ce97420 或 https://webpack.docschina.org/configuration/【官网】
1、mode: 告知 webpack 使用相应模式的内置优化。【 "production", // "production" | "development" | "none"】
2、entry：入口，定义要打包的文件
2、output：出口，定义打包输出的文件；包括路径，文件名，还可能有运行时的访问路径（publicPath）参数
3、module: webpack将所有资源都看做是模块,而模块就需要加载器；
4、resolve：这些选项能设置模块如何被解析。定义能够被打包的文件，文件后缀名
5、plugins：定义以下额外的插件
6、optimization：优化设置 【从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化， 不过所有的优化还是可以手动配置和重写】
7、DevServer：webpack-dev-server 可用于快速开发应用程序。
8、cache：缓存生成的 webpack 模块和 chunk，来改善构建速度。【cache 会在开发 模式被设置成 type: 'memory' 而且在 生产 模式 中被禁用】
9、devtool：选择一种 source map 风格来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
二、概念：
1、loader 加载器 ：https://www.w3cschool.cn/webpackguide/webpackguide-fhpm2779.html
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。
eg： 一张 png 图片 文件，通过 图片的loader，转化后，输出 一个js 对象，{value：base64数据}。js 就可以获取到到这张图片数据。
2、plugins（插件）：https://www.w3cschool.cn/webpackguide/webpackguide-rf13277b.html
插件可以完成更多 loader 不能完成的功能。比如创建 静态服务器等
总结：loader 处理通过 loader 转换 为 js可以用的 数据（字符串 或 代码），在程序中使用。而 插件可以完成不需要 loader 转换的 一些工作【如：创建服务器，给文件生成时间戳 等】。
3、
webpack 的一些说明
1、在多个文件中import同一个文件，webpack不会多次打包 ： https://segmentfault.com/a/1190000008521430
2、 webpack的 mode 配置 除了在webpack.config.js中配置，也可以在 CLI 上通过参数传进去。https://webpack.docschina.org/configuration/mode/
webpack --mode=development
3、webpack可以执行 任何名称的配置文件。https://webpack.docschina.org/guides/getting-started/#using-a-configuration
webpack运行时，默认是执行webpack.config.js的配置，CLI运行时，也可以指定任意文件名的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。
npx webpack --config webpack.config.js
webpack功能的实现
下面的参考：https://www.jianshu.com/p/90e1049a5677
1、生成Source Maps ：
module.exports = { devtool: 'eval-source-map', // 这里配置下就可以 entry: __dirname + "/app/main.js", output: {} }
2、使用webpack构建本地服务器 ： 安装包 webpack-dev-server
devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 host: "192.168.0.232", //本机的局域网ip //默认 域名：localhost ； 端口：8080 open: true //是否运行成功后直接打开页面 }
注意：webpack版本与webpack-dev-server版本有兼容问题的。
3、模块 — js转码器（Babel ） ：（webpack.config.js文件配置很多项时，配置文件会特别复杂。所以 babel的配置选项 可以放在一个单独的名为 ".babelrc" 的配置文件中）
核心的两个包：
npm install --save-dev babel-core babel-loader
注意：babel-core 版本与 babel-loader 版本有兼容问题的。（亲测，两个都是最新包都出现不兼容的问题，根据提示babel-core@6.* 和 babel-loader@7.*兼容使用）
a、es6 转码器 ： 安装包 babel-preset-env
module: { rules: [ // webpack2.x 之后，loaders被rules代替,参考：https://www.jianshu.com/p/11e52308421f { test: /\.js$/, // 匹配.js文件 //排除也就是不转换node_modules下面的.js文件 exclude: /(node_modules|bower_components)/, use:[{ //加载器 loader: "babel-loader" }] } ] }
b、JSX 转码器 ： 安装包 babel-preset-react
4、模块 — css转码器 ： （其他的配置，参考 https://www.jianshu.com/p/90e1049a5677）
核心的两个包：
css-loader 使你能够使用类似@import 和 url(...)的方法实现 require()的功能。style-loader 将所有的计算后的样式加入页面中。
npm install --save-dev css-loader style-loader
module: { rules: [ { test: /\.js$/, // 匹配.js文件 //排除也就是不转换node_modules下面的.js文件 exclude: /(node_modules|bower_components)/, use:[{ //加载器 loader: "babel-loader" }] }, { // 这里配置这两个工具 test: /\.css$/, use: [ // 请注意这里对同一个文件引入多个loader的方法。 { loader: "style-loader" }, { loader: "css-loader" } ] } ] }
a、CSS预处理器
5、 插件（Plugins）— 根据html文件生成html文件： https://www.cnblogs.com/xianrongbin/p/6431288.html
npm install html-webpack-plugin --save-dev
// 配置插件 plugins: [ // new webpack.BannerPlugin('版权所有，翻版必究') new htmlWebpackPlugin({ filename:'index.html', //通过模板生成的文件名 template:'index.html',//模板路径 inject:true, //是否自动在模板文件添加 自动生成的js文件链接 title:'这个是WebPack Demo', minify:{ removeComments:true, //是否压缩时 去除注释 // collapseWhitespace: true, // removeAttributeQuotes: true } }) ]
全部代码：
const webpack = require('webpack'); // 引入webpack
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
// source-map
devtool: 'source-map',
// 文件人口、存放
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
// 本地服务器
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true, //实时刷新
host:'localhost',
port:9900
},
// 模块
module: {
rules: [
{
test: /\.js$/, // 匹配.js文件
//排除也就是不转换node_modules下面的.js文件
exclude: /(node_modules|bower_components)/,
use:[{
//加载器
loader: "babel-loader"
}]
},
{ // 这里配置这两个工具
test: /\.css$/,
use: [ // 请注意这里对同一个文件引入多个loader的方法。
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
},
// 配置插件
plugins: [
// new webpack.BannerPlugin('版权所有，翻版必究')
new htmlWebpackPlugin({
filename:'index.html', //通过模板生成的文件名
template:'index.html',//模板路径
inject:true, //是否自动在模板文件添加 自动生成的js文件链接
title:'这个是WebPack Demo',
minify:{
removeComments:true, //是否压缩时 去除注释
// collapseWhitespace: true,
// removeAttributeQuotes: true
}
})
]
}
6、webpack 处理 html 模块：https://blog.csdn.net/connie_0217/article/details/79747137 或 https://www.cnblogs.com/xianrongbin/p/6431288.html (推荐)
说明：webpack的人口文件是 js文件，根据依赖关系打包的。html 的打包是在 插件中处理的。
7、自己 配置的的webpack 项目框架。 https://github.com/kevin3623/webpack
浙公网安备 33010602011771号