Webpack

Posted 2021-03-02 ImbaCOOL

webpack

按照文件的引用关系 对文件进行合并打包
vue/cli vue 脚手架工具 基于webpack
create-react-app react 脚手架工具 基于webpack
自己用webpack 搭建脚手架工具

一、基本使用

1、下载安装
npm install webpack -D 项目安装（不推荐全局）

2、在 package.json 写指令

"scripts": {
"dev":"webpack"
},
运行指令：npm run dev

指令的配置
a、指定模式mode（production或者development）
"dev": "webpack --mode=production",

b、指定路径
当我们运行webpack指令的时候
默认的入口文件是 ./src/index.js
默认的出口文件是 ./dist/main.js

指定路径：webpack 模式 入口路径 -o 出口路径
"dev_dir": "webpack --mode=production ./demo2/src/hehe.js -o ./demo2/output/main.js",

3、配置webpack.config.js文件
默认运行指令时和package.json同级

a、单入口，单出口

const path =require(‘path‘)
function resolve(dir){
return path.join(__dirname,dir)
}
// 只有一个入口文件 只有一个出口文件
module.exports={
mode:‘development‘,// 指定模式
entry:‘./demo3/src/hehe.js‘, // 指明入口文件
output:{ //出口相关的设置（绝对路径）
path:resolve(‘./demo3/output‘), //出口的文件夹
filename:‘xixi.js‘ // 出口的文件名
}
}

b、多入口，多出口

const path = require(‘path‘)
module.exports={
mode:"development",
entry:{
wy:‘./demo4/src/xixi.js‘,
wr:"./demo4/src/hehe.js"
},
output:{
path:path.join(__dirname,"./demo4/dist"),
filename:‘[name]_[hash].js‘
// name 代表的是入口的key值
// hash 唯一不重复的hash 如果打包文件没有发生改变 hash 不会改变 不会重复打包
}
}

c、loader加载器（需要另外安装）

const path = require(‘path‘)
module.exports={
mode:"production",
entry:"./demo5/src/index.js",
output:{
path:path.join(__dirname,‘./demo5/dist‘),
filename:"main.js"
},
module: {
rules:[
//加载图片
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: ‘url-loader‘,
options: {
limit: 8192
}
}
]
},
// 加载css
{
test: /.(css)$/i,
use: [
‘style-loader‘,
‘css-loader‘
]
},
]
}
}

d、plugin插件（另外安装）

const path = require(‘path‘)
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports={
mode:"development",
entry:"./demo6/src/index.js",
output:{
path:path.join(__dirname,‘./demo6/dist‘),
filename:"main.js"
},
plugins:[
new HtmlWebpackPlugin({
title: ‘天气太好‘,
filename: ‘assets/admin.html‘, // 要导出的文件名和路径
template:‘./demo6/public/index.html‘ // 按照哪一个模板来生成html
})
]
}

二、自己搭建一个脚手架（简单版）

1. 开发者模式 npm run dev
"dev": " webpack-dev-server --config reactDemo/config/webpack.dev_config.js",
在指令中指定运行哪个webpack.config文件

a.要在本地启动一个服务器
devServer: {
contentBase: path.join(__dirname, ‘../dist‘), //将哪一个目录变成www目录
compress: true,
port: 8080
},

b.运行我们的react项目
npm run dev

c.使用jsx 语法
{
test: /.(js|jsx)$/,
exclude: /(node_modules)/, //node_modules 不需要做处理的
use: {
loader: ‘babel-loader‘,
options: {
presets: [‘@babel/preset-env‘],
plugins: [‘@babel/plugin-transform-react-jsx‘]
}
}
},

d.引入预处理语言
{
test: /.(less)$/,
exclude: /(node_modules)/, //node_modules 不需要做处理的
use:[
‘style-loader‘,
‘css-loader‘,
"less-loader"
]
},

e.html 文件的移动
new HtmlWebapckPlugin({
filename:‘index.html‘,
template:path.join(__dirname,‘../public/index.html‘)
})

2. 生产者模式 npm run build
编译打包 产生dist文件，能够进行代码压缩

指令配置：
"build":"webpack --config reactDemo/config/webpack.config.js"

webpack.config配置：
mode:‘production‘,
还有对应的入口、出口、加载器和插件