看了不少webpack的文章,不过自己平时工作一直用不上webpack,做个笔记好以后查阅
安装webpack
1.安装npde
2.安装yarn
3.初始化yarn
yarn init -y
4.安装webpack
yarn add webpack webpack-cli -D
测试打包npx webpack
5.配置webpack.config.js
const path = require('path'); //node解析路径
module.exports = {
mode:'development', //模式 development production
entry: './src/index.js', //入口
output: { //出口
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'build'),
//publicPath: 'http://www.zhufengpeixun.cn' //全局cdn网址
}
}
6.配置script package.json
npm run build
npm run dev
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
7.插件
1. webpack-dev-server
- 安装webpack-dev-server
yarn add webpack-dev-server -D
devServer: { // 开发服务器的配置
port: 3000, //端口
progress: true, //打包进度条
contentBase: './build', //服务器目录
compress: true //压缩
},
2.html插件
html模板插件 用于把打包后的文件引入到html模板中
- 安装html-webpack-plugin
yarn add html-webpack-plugin -D
- 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 配置
plugins: [ // 数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html', //模板位置
filename: 'index.html', //打包后的名字
minify: {
removeAttributeQuotes: true, //删除属性的双引号
collapseWhitespace: true, //折叠成一行
},
hash: true //增加hash戳
})
],
3.css插件
- 安装
//css-loader
yarn add css-loader -D
//less解析 less-loader
yarn add less less-loader -D
//css抽离
yarn add mini-css-extract-plugin -D
//css前缀
yarn add postcss-loader autoprefixer -D
//css压缩
yarn add optimize-css-assets-webpack-plugin -D
//js压缩
yarn add uglifyjs-webpack-plugin -D
- 引入
webpack.config.js
//css抽离
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//css压缩
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//增加css前缀
postcss.config.js
module.exports = {
plugins: [require('autoprefixer')]
}
- 配置
//抽离
plugins: [
new MiniCssExtractPlugin({
filename:'css/main.css' //抽离的文件名
})
],
//抽离优化
optimization:{ // 优化项
minimizer:[
new UglifyJsPlugin({ //压缩js
cache: true, //缓存
parallel: true, //并发打包
sourceMap: true //源码映射
}),
new OptimizeCss()
]
},
//css模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader'
]
}
]
}
4.js转换插件
- 安装
yarn add babel-loader @babel/core @babel/preset-env -D
//类属性插件
yarn add @babel/plugin-proposal-class-properties -D
//类装饰器插件
yarn add @babel/plugin-proposal-decorators -D
//
yarn add @babel/plugin-transform-runtime -D
- 配置
module: {
rules: [
{
test:/\.js$/, // 匹配js结尾
use:{
loader:'babel-loader',
options:{ // 用babel-loader 需要把es6-es5
presets:[
'@babel/preset-env'
],
plugins:[
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
"@babel/plugin-transform-runtime"
]
}
},
include:path.resolve(__dirname,'src'), //js包含目录
exclude:/node_modules/ //js排除目录
},
]
}
5.打包图片
- 安装
//处理
yarn add file-loader -D
//
yarn add url-loader -D
//处理html里的图片
yarn add html-withimg-loader -D
- 配置
module: {
rules: [
{
test: /\.html$/,
use: 'html-withimg-loader'
},
{
test: /\.(png|jpg|gif)$/,
// 做一个限制 当我们的图片 小于多少k的时候 用base64 来转化
// 否则用file-loader产生真实的图片
// use: {
// loader: 'file-loader'
// // options: {
// // outputPath: '/images/'
// // }
// },
use: {
loader: 'url-loader',
options: {
limit: 10,
outputPath: 'images/'
// publicPath: 'http://www.zhufengpeixun.cn'
}
}
},
]
}
6.source-map
配置在entry之后
// 1) 源码映射 会单独生成一个sourcemap文件 出错了 会标识 当前报错的列和行 大 和 全
// devtool:'source-map', // 增加映射文件 可以帮我们调试源代码
// 2) 不会产生单独的文件 但是可以显示行和列
// devtool:'eval-source-map',
// 3) 不会产生列 但是是一个单独的映射文件
// devtool:'cheap-module-source-map', // 产生后你可以保留起来
// 4) 不会产生文件 集成在打包后的文件中 不会产生列
devtool: 'cheap-module-eval-source-map',
7.实时打包
配置在entry之后
watch:true,
watchOptions:{ // 监控的选项
poll:1000, // 每1秒检查一次变动
aggregateTimeout:500, // 文件停止变动500毫秒之后进行构建 防止频繁提交构建 ignored:/node_modules/ // 不需要进行监控哪个文件
},
8.cleanWebpackPlugin-清除build目录 copy-webpack-plugin-拷贝目录
- 安装
yarn add clean-webpack-plugin -D
yarn add copy-webpack-plugin -D
- 配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
new CleanWebpackPlugin()
const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([{from:'doc',to:'./'}]),
- 插件地址
清空的目录取决于webapck的output中的path
9.打包文件开头注释
const webpack = require('webpack');
new webpack.BannerPlugin('make 2019 by jw')
10.resolve解析
resolve:{ // 解析 第三方包 common
modules:[path.resolve('node_modules')],
extensions:['.js','.css','.json','.vue'],
// mainFields:['style','main']
// mainFiles:[], // 入口文件的名字 index.js
// alias:{ // 别名 vue vue.runtime
// bootstrap:'bootstrap/dist/css/bootstrap.css'
// }
},
8.多页应用配置
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//多入口
mode: 'development',
entry: {
home: './src/index.js',
other: './src/other.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'home.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
chunks: ['other', 'home']
})
]
}
9.区分生产环境和开发环境
- 安装插件
yarn add webpack-merge -D //用于合并配置文件
- 配置
1.修改基础配置
webpack.base.js
2.新建webpack.dev.js 为开发环境
let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');
module.exports = smart(base,{
mode: 'development',
devServer:{
},
devtool:'source-map'
})
3.新建webpack.prod.js 为生产环境
let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');
module.exports = smart(base,{
mode: 'production',
optimization:{
minimizer:[
]
},
plugins:[
]
})
4.修改package.json
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack --config webpack.dev.js",
"prod": "webpack --config webpack.dev.js",
"serv": "webpack-dev-server"
},
10.优化项
1.noParse
module: {
noParse: /jquery/, // 不去解析jquery中的依赖库
}
rules: [
{
test: /\.js$/,
exclude: /node_modules/, //排除目录
include: path.resolve('src'), //包含目录
use: 'Happypack/loader?id=js'
},
2.IgnorePlugin
const webpack = require('webpack');
plugins: [
new webpack.IgnorePlugin(/\.\/locale/, /moment/), //忽略插件
]
3.happypack
yarn add happypack -D ///多线程打包
const Happypack = require('happypack');
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve('src'),
use: 'Happypack/loader?id=js' ///多线程打包js
},
{
test: /\.css$/, ///多线程打包css
use: 'Happypack/loader?id=css'
}
]
},
plugins: [
new Happypack({ ///多线程打包css
id: 'css',
use: ['style-loader', 'css-loader']
}),
new Happypack({ ///多线程打包js
id: 'js',
use: [{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}]
}),
]
4.引入代码
webpack自带优化 引入代码时使用import 而不使用require
可触发自动优化代码,删除引入代码中未使用的函数
