概念： 打包工具，优化、转化、压缩代码，热启动等作用
基础安装
- npm install webpack webpack-cli -g -D //全局 局部 都安装一遍
- npm init
生成package.json文件 - 新建文件
webpack.config.js,webpack 默认加载的文件，在这进行配置
webpack的基础配置
const path = require('path') ,
htmlWebpackPlugin = require('html-webpack-plugin'); //绝对路径插件
module.exports = {
mode: 'production / development' , //打包模式
entry: '', //入口简写,根据依赖寻找所有包 string | object | array
entry: { //入口文件多个时，使用对象，且只能 《 多个入口 》 -- 对应 => 《 一个出口 》
app: './src/app.js'，
vendors: './src/vendor.j'
}
output:{ //出口
path: path.resolve(__dirname, 'dist') , //输入目录
filename: "main.js" //用于输出文件的文件名
filename: "[name].js" //name 为变量，文件名不变
publicPath: "/assets"
},
module:{ //模块配置
rule:[
{
test: '/\.txt$/',//用于标识出应该被对应的 loader 进行转换的某个或某些文件。
loader: '', //使用哪个插件解析
use: { //同上功能，不过可以加入配置
loader: ''，
options: {
presets: ['env','react']
}
} ,
exclude: path.resolve(__dirname, 'node_modules'), //忽略哪个文件
},
]
},
//插件
//使用方法： require()引入， plugin数组中 new 实例化
plugins: [ //Array
new htmlWebpackPlugin({
//需要 在index.html 使用 {%= o.htmlWebpackPlugin.options.title %}
title: '文章标题',
// 本地模板文件的位置
template:"index.html",
//输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置
filename: 'index.html',
//不想写了，自己看上面文档去 html-webpack-plugin
hash: false,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
xhtml: false
}) ;
],
//热启动，需要再开发环境配置，上线不需要配置。
devServer: {
watchOptions: {
ignored: /node_modules/
},
contentBase:path.resolve(__dirname, '../dist'), //文件路径
host: 'localhost',
port: 3200
}
}
package.json 配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.config.js ", //打包，一定加上config
"dev": "webpack-dev-server --process --config build/webpack.config.js" //热启动
},
使用
npm run build/dev
原理： npm run build 相当于 webpack --config build/webpack.config.js 只是简单化而已
应用包
解析规则： 由下而上，由后置前
解析React
1, npm i babel-loader babel-preset-env babel-core babel-preset-react -D
解析css
1. npm i css-loader style-loader -D
解析sass
1. npm i style-loader css-loader sass-loader node-sass
解析图片
1. npm i url-loader file-loader -D
{
test: /\.(css|sass)$/,
loader: '',
或者
use:{
loader: '',
options:{
}
}
}
步骤介绍
吐槽
- webpack丢包率太高
- 当webpack.config.js 文件出错，打包时，会走
官方默认的配置文件.
