一、安装配置
【前提】安装node.js环境【官网下载】https://nodejs.org/zh-cn/安装教程不赘述
创建项目文件夹例如创建如下文件夹webpack_demo1
创建配置项
npm init -y
生成一个package.json文件 如下图
全局安装webpack （不推荐，进行下一步操作）
npm install webpack -g
局部安装webpack(推荐)
npm install webpack –save-dev
另外，webpack 4要求安装包
npm install webpack-cli –save-dev
一起安装
npm install webpack webpack-cli –save-dev
以下表示安装成功
创建入口文件
./src/index.js
任意编写index.js文件内容用于测试
配置生产和开发模式
打开package.json文件添加如下脚本
“scripts”: {
“dev”: “webpack –mode development”,
“build”: “webpack –mode production”
}
现在运行：
npm run dev
生成dist/main.js ，其中 main.js 没有压缩
npm run dev 表示开发模式
npm run build
此时的main.js 被压缩 ，这便是生产模式
接下来看看打包的js文件是否能够使用
创建index.html 引入打包好的main.js
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<script src=”./main.js” charset=”utf-8″></script>
</head>
<body>
</body>
</html>
打开浏览器调试
输出结果表示打包成功，大功告成 ！！！
二、使用配置文件进行打包
上一讲中我们打包没有用到webpack.config.js配置文件，webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用，更好地学习webpack。
根目录下新建一个webpack.config.js文件 （记载配置信息）
配置文件
const path = require(‘path’);
module.exports = {
entry:’./public/index.js’,
output:{
path:path.resolve(__dirname,’build’),
filename:’bundle.js’
}
}
字段
意义
entry
入口，所需打包的文件的路径
output
出口
path
文件打包后存放的路径
path.solve()
将路径或者路径片段的序列处理成绝对路径
_dirname
表示当前文件所在目录的绝对路径
filename
打包后文件的名称
按照配置项新建一个入口文件public/index.js
运行npm run dev
三、配置入口和出口的进阶使用
一、单出口形式
webpack.config.js
const path = require(‘path’);
module.exports = {
//单出口形式
entry:[‘./public/index.js’,’./public/index2.js’],//有多个文件
output:{
path:path.resolve(__dirname,’build’),
filename:’bundle.js’
}
}
运行npm run dev
生成唯一的打包文件 bundle.js
二、多出口形式
`webpack.config.js`
const path = require(‘path’);
module.exports = {
//多出口形式
entry:{
entryOne:’./public/entryOne/index.js’,
entryTwo:’./public/entryTwo/index.js’,
},
output:{
path:path.resolve(__dirname,’build’),
filename:'[name].js’
}
}
文件结构
运行npm run dev
生成两个打包文件
四、配置webpack-dev-server
一、了解 webpack-dev-server
webpack-dev-server用来配置本地服务器
为 webpack 打包生成的文件提供web服务
自动刷新和热替换（HMR）
二、安装webpack-dev-server
npm install –save-dev webpack-dev-server
三、 配置webpack.config.js文件
devServer:{
contentBase:’./dist’, //设置服务器访问的基本目录
host:’localhost’, //服务器的ip地址
port:8080, //端口
open:true //自动打开页面
}
四、配置package.json
“scripts”: {
“start”: “webpack-dev-server –mode development”
}
五、运行命令
npm run dev 打包文件
npm run start 打开服务器
五、打包css
安装loadernpm install style-loader css-loader –save-dev
配置loader
在webpack.config.js文件里配置module中的rules，如下：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
module.exports = {
/*入口和出口文件可以不用配置，默认*/
module:{
rules:[
{
test:/\.css$/,
use:[‘style-loader’,’css-loader’]//引入的顺序至关重要,不可改变
}
]
}
}
测试是否打包成功
在src下创建index.css文件
在index.js中引入index.css文件require(‘!style-loader!css-loader!./index.css’);
进行打包后运行 npm run dev（之前配置好，详见第一篇文章：webpack4 基础配置）红色的背景，控制台输出hello
————
六、使用babel编译ES6
babel转化语法所需依赖项：
babel-loader： 负责 es6 语法转化
babel-core： babel核心包
babel-preset-env：告诉babel使用哪种转码规则进行文件处理
安装依赖
npm install babel-loader @babel/core @babel/preset-env –save-dev
配置webpack.config.js文件
{
test:/\.js$/,
exclude:/node_modules/,
use:’babel-loader’
}
新建 .babelrc 文件配置转换规则
{
“presets”:[“@babel/preset-env”]
}
或者直接在webpack.config.js文件中配置规则
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:’babel-loader’,
options:{
presets:[‘@babel/preset-env’]
}
}
}
七、提取分离打包css
前面讲过 将css文件引入到js文件中，然后一起打包成js文件，现在我们学习单独提取分离css并且打包。
安装插件min-css-extract-plugin
npm install mini-css-extract-plugin –save-dev
配置webpack.config.js
引入插件 const MiniCssPlugin = require(“mini-css-extract-plugin”);
rules 设置
{
test:/\.css$/,
use:[MiniCssPlugin.loader,’css-loader’]
}
plugins 设置
new MiniCssPlugin({
filename:’./css/[name].css’
})
截图
运行命令打包
八、压缩优化css
压缩css,去除注释
安装插件
npm install –save-dev optimize-css-assets-webpack-plugin
配置webpack.config.js
头部引入插件
const OptimizeCssAssetsPlugin = require(“optimize-css-assets-webpack-plugin”) `
| 参数 | 意义 | | ————————- | ———————————————————— | | assetNameRegExp | 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g | | cssProcessor | 用于压缩和优化CSS 的处理器，默认是 cssnano. | | cssProcessorPluginOptions | 传递给cssProcessor的插件选项，默认为{} | | canPrint | 表示插件能够在console中打印信息，默认值是true | | discardComments | 去除注释 |
在plugins模块引入
new OptimizeCssAssetsPlugin({
assetNameRegExp:/\.css$/g,
cssProcessor:require(“cssnano”),
cssProcessorPluginOptions:{
preset:[‘default’,{discardComments:{removeAll:true}}]
},
canPrint:true
})
运行打包命令之后就可以压缩webpack –mode development
发表回复