指定一个入口文件 webpack会自动解析模块 整体打包成一个.js文件
1基本用法
(1)npm init -y //初始化packge.json文件
script里添加命令
"build":"webpack"
"dev":"webpack-dev-server"
(2)《dist...index.html》《src...index.js》 //创建目录dist 和src index.html 和 main.js
(3)编写src...下的main.js文件
(4)npm install webpack --save-dev //安装webpack
(5)npm install webpack-cli --save-dev //webpack4.0版本后的要安装 cli脚手架
(6)跟目录创建webpack.config.js文件 && 编写 const path = require('path')
(5)npm install lodash --save //安装lodash
(8)npx webpack 执行打包
(9)index.html文件内添加要引入的文件 <script src="./main.js"></script>
2、Webpack 的写法
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const uglify = require('uglifyjs-webpack-plugin')
split 动态模块加载 就是import * from './abc.js'
module.exports = {
mode: "production", //development 开发模式 || production 产品模式 打包后会压缩 优化
entry: './src/index.js', //入口 可以是[对象 函数 promise string]
devtool: "source-map",
output: { //出口
filename: '[chunkhash:3]_[name].js', //导出文件名 哈希3位 + 传入的名字
path: path.resolve(__dirname,'dist'), //导出地址 是绝对路径
publicPath: "/output/dist/", //异步加载的东西都需要手动设定publicPath
library: 'MyLibrary', //包规范格式 umd兼容
libraryTarget: "umd"
},
resolve: { //处理
alias: { //别名
test:path.resolve(__dirname,'test/test.js')
}
},
module: { //模块
noParse:/jquery/, //不进行处理的模块 或者叫文件
rules: [ //规则
{
test: /\.(sc|c|sa)ss$/, //正则表达式匹配 当引入的模块后缀是css时做下面的事
use: [ //用这几个规则处理 从最后的往前处理
MiniCssExtractPlugin.loader,{ //MiniCssExtractPlugin 抽取css文件 需要配合 plugins
loader:'css-loader',
options: { //options 个性化 loader 的行为
sourceMap: true
}
},{
loader: 'postcss-loader',
options:{ //options 个性化 loader 的行为
ident: 'postcss',
sourceMap:true,
plugins:[
require('autoprefixer')
]
}
},
{
loader:'sass-loader',
options: { //options 个性化 loader 的行为
sourceMap: true
}
}
]
}
]
},
plugins: [ //插件 去注册到每个阶段 比如less转换成css 转换完成之后 用plugins 中间插入 把处理好的css拿到 去新建一个文件
new MiniCssExtractPlugin({
filename:'[name].css', // 设置最终输出的文件名
chunkFilename:'[id].css' //唯一id输出文件名
}),
],
optimization: { //优化
minimizer: [new OptimizeCSSAssetsPlugin({})
]
}
}
loader 是对每个文件(模块)的预处理 处理sass less 这种方言类 处理成css html
MiniCssExtractPlugin.loader 必须去配合 plugins来处理
.babelrc 这里rc代表根目录文件 是babel的根配置文件
anywhere & 会打开静态服务器 然后再按Q 退出 就能又有服务器 又能写终端
3、postCSS 处理loader(兼容 添加css3前缀)
npm i -D postcss-loader
npm install autoprefixer --save-dev
{
loader: 'postcss-loader',
options:{
ident: 'postcss',
sourceMap:true,
plugins:[
require('autoprefixer')
]
}
4、css文件单独抽取
npm install --save-dev mini-css-extract-plugin
创建webpack.product.config.js
mode: 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
MiniCssExtractPlugin.loader,{
loader:'css-loader',
options: {
sourceMap: true
}
plugins: [
new MiniCssExtractPlugin({
filename:'[name].css', // 设置最终输出的文件名
chunkFilename:'[id].css'
})
]
5、webpack css压缩
npm i -D optimize-css-assets-webpack-plugin
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
}
6、webpack js压缩
npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
(各种loader)
clean-webpack-plugin 作用是打包前把dist目录里的文件清空
webpack 作用？
html类
html-webpack-plugin 作用是打包html
babel类
@babel/core
@babel/preset-env 作用是把es6转换成es5
babel-loader
@babel/polyfill 作用是让bubel可以支持es6的函数这些代码
css类
css-loader
less-loader
postcss-loader autoprefixer
mini-css-extract-plugin
图片类
url-loader
file-loader
vue类
vue
vuex
vue-router
vue-loader
vue-template-compiler
vue-style-loader
eslint类
eslint
eslint-loader
babel-eslint
(导入loader)
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
