webpack4.0入门配置文件
wepback风头正火 ，但是公司一直在用gulp，正好赶上年底活动，借此机会第一次尝试了webpack，说实话webpack真的很强大，内容一层一层递进。
这几天跟着官网跑了一遍，然后写了自己的配置文件，因为活动内容不多，很多强大的功能没有用上，但是相信对于入门来说足够了。
下面来总结并附上源码
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack支持的模块语法有哪些？
ES6,CommonJs,Amd
webpack和gulp的区别?
Webpack可以通过众多loader和plugin完成许多gulp上的功能，但Webpack本质在于模块打包，而gulp的本质在于执行任务；使用webpack-stream包可以实现gulp和webpack的搭配使用
核心概念
1．入口：指定使用哪个模块来作为构建内部依赖图的开始，随后打包成bundle
2．输出：定义输出生产的bundle的位置及文件名；
3．loader：让webpack可以处理非js模块；loader 可以将所有类型的文件转换为webpack 能够处理的有效模块。
4. 插件：执行的任务范围包括从打包优化和压缩，一直到重新定义环境中的变量，目的在于完成一些loader无法完成的任务。
常用配置项
1．mode： ‘development’|| ‘production’ || ‘none’
2．entry: array || obj
3．output: {
path: path.resolve(__dirname, "dist"), // 输出文件的目标路径
filename:’bundle.js’,// 打包后的文件名
publicPath: ‘static’// 输出解析文件目录，url相对于html
}
4.module: {
rules: [
{
test: /\.js$/, // 指定使用此loader的文件
use: ‘babel-loader’,
options: { },
include: /src/, // 匹配项
exclude: /node_modules/ // 非匹配项
}
]
}
5.plugins: […instance]
6.devServer: {
host: ‘localhost’,
port: ‘8080’,
contentBase: Boolean|| string || array, // 服务器从哪里获取内容
hot：boolean, // 是否开启webpack模块热替换
open: Boolean, // 是否自动打开浏览器
proxy: { path: targetUrl}, // 代理
…others
}
7.resolve: {
alias: {
test: url
},
extensions: [.js, .json]
}
8.devtool: string || false
可选值：
cheap-eval-source-map
eval-source-map
cheap-source-map
source-map
cheap-module-eval-source-map
…others
常用loader及plugin
loader
Css-loader：解析css中资源路径；
Sass-loader：sass转码为css
Postcss-loader：使webpack可以用postcss处理css
Px2rem-loader: px转换为rem
Style-loader：将css以style标签的形式插入到dom中
Babel-loader：转码js以提高兼容性
url-loader：图片转base64
webpack imagemin-webpack-plugin 压缩图片
file-loader：将文件输出到输出目录并返回文件路径
html-loader：处理html中资源路径
eslint-loader：使js支持eslint
plugin
html-webpack-plugin：根据模板导出html文件，并注入bundle
DinePlugin: 创建编译时可以进行配置的全局变量。
HashedModuleIdsPlugin: 根据模块的相对路径生成一个四位数的hash作为模块id
extract-text-webpack-plugin：分离css
mini-css-extract-plugin：分离css
uglifyjs-webpack-plugin：压缩js
optimize-css-assets-webpack-plugin：压缩css
clean-webpack-plugin: 清空某个目录
cli常用命令
--config 使用指定的配置文件
--env.key=value 指定环境变量
--mode=production 指定模式
--progress 打印编译进度的百分比
--display-error-details 展示错误细节
--define 定义环境变量
-w 观察文件变化，变化后重新执行构建流程
--hot 开启模块热替换
--json > stats.json 将编译结果的各种信息输出为json文件
--profile 捕获编译时每个步骤的时间信息
配置文件编写
前端常见需求：
1) Js压缩
2) Css压缩
3) Css提取
4) 小图片转base64
5) Px转rem
6) Css前缀添加
7) Sass转码
8) Babel转码
9) 文件名加hash
10) 文件编码格式转换（常见utf-8与gbk互转）
11) 代码分离
12) Eslint
13) 模块热替换
14) 配置编译过程的全局变量
15) 打包后的代码注入html中
1. 常用模块变量
__dirname:当前文件夹路径
2. 常用占位符
[hash]:模块标识符的hash（后拼接：‘:n’可指定长度）
[chunkhash]: chunk内容的hash（后拼接：‘:n’可指定长度）
[name]:模块名称
[id]: 模块标识符
3. 配置文件使用commonjs编写的，配置类型有下面几种：
1) 导出一个配置对象
2) 导出一个函数
3) 导出一个promise
代码分离
该功能可以把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。
代码分离的方式:
1.手动配置多个入口文件
2.使用webpack自带的splitChunks功能
3.使用import（）动态导入
下面附上自己的web.config.js
//生成html文件 npm i -D html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
//每次打包前清理目录文件 npm i -D clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');
//js压缩 npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//单独打包css，webpack3是利用extract-text-webpack-plugin插件提取单独打包css文件
//webpack4得使用mini-css-extract-plugin npm i -D mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//压缩css npm i -D optimize-css-assets-webpack-plugin
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
//用于打包后的文件转码 npm i webpack-encoding-plugin
const EncodingPlugin = require("webpack-encoding-plugin");
//提取公共模块 请参考https://segmentfault.com/a/1190000012828879
//引入glob正则匹配多页面 npm i -D glob
var glob = require('glob');
//安装webpack npm i -D webpack@<version>（版本号）
//webpack4后将webpack-cli分别出来要自己安装 npm in -D webpack-cli
const webpack = require('webpack');
//处理文件路径的工具
const path = require('path');
//设置变量判断是开发环境还是生产环境 npm i -D cross-env
const devMode = process.env.NODE_ENV !== 'production';
//获取所有路口js,生成一个路径对象.
var getEntry = function () {
var entry = {};
//首先我们先读取我们的开发目录
glob.sync('./source/**/*.js').forEach(function (name) {
var n = name.slice(name.lastIndexOf('source/') + 7, name.length - 3);
n = n.slice(0, n.lastIndexOf('/'));
//接着对路径字符串进行了一些裁剪成想要的路径
entry[n] = name;
});
console.log(entry);
/**
* entry = {
* 'crowd/index' : './source/main/index/index.js',
* 'index/index' : './source/content/index/index.js'
* }
*
**/
//最后返回entry 给 webpack的entry
return entry;
};
module.exports = {
entry: getEntry(), //入口文件
output: { //文件输出位置
path: path.resolve(__dirname, 'dist'), //配置输出路径
filename: "js/[name].bundle.js", //文件输出形式
chunkFilename: "js/[name].chunk.js",
publicPath: '/'//虚拟目录，自动指向path编译目录
},
//tips:chunkFilename网上觉得靠谱的解释
//chunkname是未被列在entry中，却又需要被打包出来的文件命名配置。什么场景需要呢？在按需加载（异步）模块的时候，
//这样的文件是没有被列在entry中的，如使用CommonJS的方式异步加载模块：
// require.ensure(["modules/tips.jsx"], function(require) {
// var a = require("modules/tips.jsx");
// // ...
// }, 'tips');
//tips:一般来说，引入第三方库有一下三种情况：
// 通过CDN引入；
// 通过npm 安装并引入；
// 第三方js文件就在本地
resolve: {//一些配置项，如第三方的js文件就在本地，怎么通过webpack引入
alias: {
$: path.resolve(__dirname, './dist/jquery.js'),
jQuery: path.resolve(__dirname, './dist/jquery.js'),
}
},
plugins: [ //插件
require("autoprefixer"),//引入自动补全前缀，直接引入autoprefixer-loader并没有生效，
//安装postcss-loader并引入autoprefixer时生效，并创建postcss.config.js文件
new webpack.HotModuleReplacementPlugin(),//启动模块热替换
new webpack.NamedModulesPlugin(), //用于启动HMR时可以显示模块的相对路径
new UglifyJsPlugin({}),//js压缩
new MiniCssExtractPlugin({//css分离
filename: devMode ? 'css/[name].css' : 'css/[name].[hash:5].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash:5].css',
}),
new OptimizeCSSAssetsPlugin({}),//css压缩
//多页应用时配置多个html时，那么就需要实例化该插件多次
new HtmlWebpackPlugin({
template: 'src/html/index.html',
excludeChunks: ['list', 'detail']//配置不允许注入的chunk
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: 'src/html/list.html',
chunks: ['common', 'list']//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的chunk注入到模板中
}),
new HtmlWebpackPlugin({
filename: 'detail.html',
template: 'src/html/detail.html',
chunks: ['common', 'detail']
}),
//用来项目的转码
new EncodingPlugin({
encoding: 'GB2312'
}),
//清除dist文件夹
new CleanWebpackPlugin(['dist'])
],
//模块
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',//cnpm i -D babel-loader @babel/core @babel/preset-env webpack
options: {//npm i -S babel-polyfill 实现浏览器对不支持API的兼容（兼容旧环境、填补）
presets: ['@babel/preset-env']
}
}
],
exclude: /node_modules/
},
{
test: /\.(sa|sc|c)ss$/,
use: [//npm i -D style-loader css-loader
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,//因为MiniCssExtractPlugin不支持热替换，所以当是生产环境时不启用这个插件
'css-loader',
'postcss-loader',//npm i -D postcss-loader
// {网上还有这种写法
// loader: 'postcss-loader',
// options: {
// plugins: () => [
// require('autoprefixer')
// ],
// }
// },
'sass-loader',//使用sass-loader要使用node-loader,npm i -D sass-loader node-sass
{
loader: 'px2rem-loader',//配合flexible实现移动端下的适配 npm i px2rem-loader
// options here
options: {
remUni: 75,
remPrecision: 8
}
}
]
},
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [ {//npm i -D url-loader
loader: 'url-loader',// 在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
options: {
limit: 10000,//设置字节限制
name: 'img/[name]_[hash:5].[ext]'
}
} ]
}
]
},
//配置开发服务功能 npm i -D webpack-dev-server
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
historyApiFallback: true,
hot: true,
port: 9000,
publicPath:'/',
}
};