正文
webpack配置教程
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1、npm脚本运行webpack与命令行输入webpack的区别 ： https://segmentfault.com/a/1190000011052193
npm 模块的 安装 和 卸载 ： https://blog.csdn.net/yihanzhi/article/details/75665959
npm命令中，--save--dev --save的区别 ： https://blog.csdn.net/tjcjava/article/details/69257848 （只是在package.json中位置不一样，其他的没有区别。nodejs运行是根据依赖树执行的，与package.json位置无关。如果每次安装都是npm install就更是完全没有区别）
2、（bug）webpack@3.12.0版本，在命令行直接使用webpack就可以顺利打包，使用npm run webpack提示错误 ：
暂时不知道什么原因，重新安装 或者 换一个版本（比如 webpack@3.5.6）就没有这个问题了。
一、webpack配置项：https://www.jianshu.com/p/43fa9ce97420
1、entry：入口，定义要打包的文件
2、output：出口，定义打包输出的文件；包括路径，文件名，还可能有运行时的访问路径（publicPath）参数
3、module: webpack将所有资源都看做是模块,而模块就需要加载器；
4、resolve：定义能够被打包的文件，文件后缀名
5、plugins：定义以下额外的插件
二、概念：
1、loader解析器：
如果我们想要import './src/scss/main.js’这种形式引入css，scss，less，stylus，js等等文件，我们就需要使用loader解析器配置css
下面的参考：https://www.jianshu.com/p/90e1049a5677
3、生成Source Maps ：
module.exports = {
devtool: 'eval-source-map', // 这里配置下就可以
entry: __dirname + "/app/main.js",
output: {}
}
4、使用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版本有兼容问题的。
5、模块 — 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
6、模块 — 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预处理器
7、 插件（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'); // 引入webpackvar 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
}
})
]
}
8、webpack 处理 html 模块：https://blog.csdn.net/connie_0217/article/details/79747137 或 https://www.cnblogs.com/xianrongbin/p/6431288.html (推荐)
说明：webpack的人口文件是 js文件，根据依赖关系打包的。html 的打包是在 插件中处理的。
9、自己 配置的的webpack 项目框架。 https://github.com/kevin3623/webpack
webpack多页应用脚手架 ：https://www.jianshu.com/p/eadea5d27f0c
说明：这里eslint规则（可以根据需要关闭对应的 规则）
a、作者使用的是Linux系统，所以eslint会报错。解决方法：https://yq.aliyun.com/ziliao/572681
b、强制在对象和数组文字中一致地使用尾随逗号。修改方法：https://cloud.tencent.com/developer/section/1135595
（不推荐自己配置 脚手架)
