初始化项目：
生成package.json文件
{
"name": "webpack_test",
"version": "1.0.0"
}
安装webpack
目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能
文件名称：webpack.config.js
文件内容：
const { resolve } = require(‘path‘); //node内置核心模块，用来设置路径。
module.exports = {
entry: ‘./src/js/app.js‘, // 入口文件配置（简写）
/*完整写法：
entry:{
main:‘./src/js/app.js‘
}
*/
output: { // 输出配置
filename: ‘./js/built.js‘, // 输出文件名
path: resolve(__dirname, ‘build‘) //输出文件路径配置
},
mode: ‘development‘ //开发环境(二选一)
mode: ‘production‘ //生产环境(二选一)
};
运行指令： webpack
概述：less文件webpack不能解析，需要借助loader编译解析
创建less文件
入口app.js文件
安装loader
配置loader
{
test: /\.less$/, // 检查文件是否以.less结尾（检查是否是less文件）
use: [ // 数组中loader执行是从下到上，从右到左顺序执行
‘style-loader‘, // 创建style标签，添加上js中的css代码
‘css-loader‘, // 将css以commonjs方式整合到js文件中
‘less-loader‘ // 将less文件解析成css文件
]
},
运行指令：webpack
概述：对js基本语法错误/隐患，进行提前检查
安装loader
备注1：在：eslint.org网站 -> userGuide -> Configuring ESLint 查看如何配置
备注2：在：eslint.org网站 -> userGuide -> Rules 查看所有规则
配置loader
module: {
rules: [
{
test: /\.js$/, //只检测js文件
exclude: /node_modules/, //排除node_modules文件夹
enforce: "pre", //提前加载使用
use: { //使用eslint-loader解析
loader: "eslint-loader"
}
}
]
}
修改package.json（需要删除注释才能生效）
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 6, // 支持es6
"sourceType": "module" // 使用es6模块化
},
"env": { // 设置环境
"browser": true, // 支持浏览器环境： 能够使用window上的全局变量
"node": true // 支持服务器环境: 能够使用node上global的全局变量
},
"globals": { // 声明使用的全局变量, 这样即使没有定义也不会报错了
"$": "readonly" // $ 只读变量
},
"rules": { // eslint检查的规则 0 忽略 1 警告 2 错误
"no-console": 0, // 不检查console
"eqeqeq": 2, // 用==而不用===就报错
"no-alert": 2 // 不能使用alert
},
"extends": "eslint:recommended" // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
},
运行指令：webpack
概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理
安装loader
配置loader
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [‘@babel/preset-env‘]
}
}
}
]
}
运行指令：webpack
安装包
使用
- app.js
import ‘@babel/polyfill‘; // 包含ES6的高级语法的转换
优点：解决babel只能转换部分低级语法的问题(如：let/const/解构赋值...)，引入polyfill可以转换高级语法(如:Promise...)
缺点：将所有高级语法都进行了转换，但实际上可能只使用一部分
解决：需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）
安装包
配置loader
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [
[
‘@babel/preset-env‘,
{
useBuiltIns: ‘usage‘, // 按需引入需要使用polyfill
corejs: { version: 3 }, // 解决warn
targets: { // 指定兼容性处理哪些浏览器
"chrome": "58",
"ie": "9",
}
}
]
],
cacheDirectory: true, // 开启babel缓存
}
}
},
概述：图片文件webpack不能解析，需要借助loader编译解析
添加2张图片:
在less文件中通过背景图的方式引入图片
安装loader
配置loader
{
test: /\.(png|jpg|gif)$/,
use: {
loader: ‘url-loader‘,
options: {
limit: 8192, // 8kb --> 8kb以下的图片会base64处理
outputPath: ‘images‘, // 决定文件本地输出路径
publicPath: ‘../build/images‘, // 决定图片的url路径
name: ‘[hash:8].[ext]‘ // 修改文件名称 [hash:8] hash值取8位 [ext] 文件扩展名
}
}
},
运行指令：webpack
概述：html文件webpack不能解析，需要借助插件编译解析
添加html文件
安装插件Plugins
在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）
配置插件Plugins
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html‘, // 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源)
}),
]
运行指令：webpack
概述：html中的图片url-loader没法处理，它只能处理js中引入的图片 / 样式中图片，不能处理html中img标签，需要引入其他html-loader处理。
添加图片
安装loader
配置loader
{
test: /\.(html)$/,
use: {
loader: ‘html-loader‘
}
}
运行指令：webpack
概述：其他资源webpack不能解析，需要借助loader编译解析
添加字体文件
修改样式
@font-face {
font-family: ‘iconfont‘;
src: url(‘../media/iconfont.eot‘);
src: url(‘../media/iconfont.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘../media/iconfont.woff2‘) format(‘woff2‘),
url(‘../media/iconfont.woff‘) format(‘woff‘),
url(‘../media/iconfont.ttf‘) format(‘truetype‘),
url(‘../media/iconfont.svg#iconfont‘) format(‘svg‘);
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
修改html，添加字体
配置loader
{
test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源
loader: ‘file-loader‘,
options: {
outputPath: ‘media‘,
name: ‘[hash:8].[ext]‘
}
}
运行指令：webpack
安装loader
详细配置见官网：指南 -> 开发环境 -> 使用webpack-dev-server
修改webpack配置对象（注意不是loader中）
devServer: {
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
}
修改url-loader部分配置
publicPath: ‘../build/images/‘ --> publicPath: ‘images/‘修改package.json中scripts指令
运行指令：npm run start
webpack-dev-server指令才能启动devServer配置，然后配置到package.json中才行概述：热模块替换（HMR）是webpack提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新（只更新变化的模块，不变的模块不更新）。
详细配置见官网：指南 -> 模块热替换
修改devServer配置
devServer: {
contentBase: resolve(__dirname, ‘build‘), // 运行项目的目录
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
hot: true // 开启热模替换功能 HMR
}
问题：html文件无法自动更新了，需要增加一个入口
entry: [‘./src/js/app.js‘,‘./src/index.html‘]
以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。
创建文件夹config，将webpack.config.js复制两份
修改webpack.prod.js配置，删除webpack-dev-server配置
// / 代表根路径(等价于这个：http://localhost:5000/)，以后项目上线所有路径都以当前网址为根路径出发
module.exports = {
output: {
path: resolve(__dirname, ‘../build‘), // 文件输出目录
filename: ‘./js/built.js‘, // 文件输出名称
publicPath: ‘/‘ // 所有输出资源在引入时的公共路径，若loader中也指定了publicPath，会以loader的为准。
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: {
loader: ‘url-loader‘,
options: {
limit: 8192,
outputPath: ‘images‘,
publicPath: ‘/images‘, // 重写publicPath，需要在路径前面加上 /
name: ‘[hash:8].[ext]‘
}
}
},
]
},
mode: ‘production‘, //修改为生产环境
devtool: ‘cheap-module-source-map‘ // 修改为生产环境的错误提示
// 删除devServer
}
修改package.json的指令
开发环境指令
生产环境指令
安装插件
引入插件
配置loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader‘,
‘less-loader‘,
]
}
配置插件
new MiniCssExtractPlugin({
filename: "css/[name].css",
})
运行指令
安装loader
配置loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader‘,
{
loader: ‘postcss-loader‘,
options: {
ident: ‘postcss‘,
plugins: () => [
require(‘postcss-flexbugs-fixes‘),
require(‘postcss-preset-env‘)({
autoprefixer: {
flexbox: ‘no-2009‘,
},
stage: 3,
}),
require(‘postcss-normalize‘)(),
],
sourceMap: true,
},
},
‘less-loader‘,
]
}
添加配置文件: .browserslistrc
last 1 version
> 1%
IE 10 # sorry
运行指令：
安装插件
引入插件
配置插件
new OptimizeCssAssetsPlugin({
cssProcessorPluginOptions: {
preset: [‘default‘, { discardComments: { removeAll: true } }],
},
cssProcessorOptions: { // 解决没有source map问题
map: {
inline: false,
annotation: true,
}
}
})
运行指令：
修改插件配置
new HtmlWebpackPlugin({
template: ‘./src/index.html‘,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}
})
运行指令：
以上就是webpack生产环境的配置，可以生成打包后的文件。
原文：https://www.cnblogs.com/freedomweb/p/14737663.html