安装
//在指定文件夹中打开命令行
mkdir webpackX
npm init -y
//初始化package.json文件
//安装webpack和webpack-cli
npm i webpack webpack-cli -D
//其中 i = install ; -D = --save-dev
打包配置1
在根目录下新建 webpack.config.js (名字自己取),同时建src文件夹及其下面index.js文件
webpack.config.js
//由于webpack是基于node的，所以使用它的路径模块
const path = require('path')
module.exports = {
//入口：分单页入口和多页入口
entry:{
index:'./src/index.js'
},
//出口
output:{
//打包出来的文件名称
filename:'bundle.js',
//打包出来的对应磁盘位置 dist文件夹下
path:path.resolve(__dirname,'dist')
},
//模式是在webpack4出来的有三个参数production,development,none具体参考文档看区别
mode:'production',
}
index.js
document.write('123456')
到此我们基础设置完成了 可以测试打包了 命令行键入
./node_modules/.bin/webpack
可以看到如下图一样在dist下面生成了我们在output里面所指定的filename文件
再在dist下新建index.html 里面引入bundle.js 打开浏览器
修改为Script命令执行打包
在上面我们是在命令行中输入 ./node_moudles/.bin/webpack执行的打包，其实我们可以把提取出来 放在package.json中的“script”配置里面 因为这个script关联的就是node_moudles文件夹下面的.bin文件夹
现在我们直接在命令行中 执行 npm run build
添加loader支持es6 es7
webpack开箱时只支持js和json，所以其他的文件都需要loader来帮忙解析，我们修改配置文件中的module,在rules这个数组中配置babel-loader，但是首先需要安装babel-loader。
需要安装babel-core,babel-preset-env babel-loader
npm i @babel/core @babel/preset-env babel-loader -D
配置babel需要在当前根目录前创建“.babelrc”配置文件（具体参考babel）
这里为了测试也安装了react,react-dom babel-preset-react
.babelrc
{
"presets":[
"@babel/preset-env",
"@babel/preset-react"
]
}
webpack.config.js
//由于webpack是基于node的，所以使用它的路径模块
const path = require('path')
module.exports = {
//入口：分单页入口和多页入口
entry:{
index:'./src/index.js'
},
//出口
output:{
//打包出来的文件名称
filename:'bundle.js',
//打包出来的对应磁盘位置 dist文件夹下
path:path.resolve(__dirname,'dist')
},
//模式
mode:'production',
//loaders
module:{
rules:[
test:/\.js$/, //匹配以.js结尾的文件
use:'babel-loader' //对其使用babel-loader
]
}
}
现在在index.js中写react 再打包将其编译
index.js
import React from "react";
import ReactDom from "react-dom";
class Test extends React.Component {
render() {
return <h1 className="test">我是react</h1>;
}
}
ReactDom.render(<Test />, document.getElementById("root"));
执行完build后 同样在dist中新建index.html引入bundle.js且建个id为root的元素 打开浏览器
添加loader支持css
安装css-loader,为了打包直接看到效果 我们可以再安装一个style-loader,它是匹配css文件打包进style标签再添加到head标签里面
npm i css-loader style-loader -D
在配置文件中添加loader
webpack.config.js
//由于webpack是基于node的，所以使用它的路径模块
const path = require('path')
module.exports = {
//入口：分单页入口和多页入口
entry:{
index:'./src/index.js'
},
//出口
output:{
//打包出来的文件名称
filename:'bundle.js',
//打包出来的对应磁盘位置 dist文件夹下
path:path.resolve(__dirname,'dist')
},
//模式
mode:'production',
//loaders
module:{
rules:[
{
test:/\.js$/, //匹配以.js结尾的文件
use:'babel-loader' //对其使用babel-loader
},
{
test:/\.css$/,
use:[
//链式解析 从右到左 先使用css-loader解析 然后传递给style-loader解析
'style-loader',
'css-loader'
]
}
]
}
}
在src下新建index.css
index.css
color:blue
执行打包 访问index.html会看到蓝色字体
添加loader支持less/sass
同样需要安装 less 和 less-loader
npm i less less-loader -D
webpack.config.js
//由于webpack是基于node的，所以使用它的路径模块
const path = require('path')
module.exports = {
//入口：分单页入口和多页入口
entry:{
index:'./src/index.js'
},
//出口
output:{
//打包出来的文件名称
filename:'bundle.js',
//打包出来的对应磁盘位置 dist文件夹下
path:path.resolve(__dirname,'dist')
},
//模式
mode:'production',
//loaders
module:{
rules:[
{
test:/\.js$/, //匹配以.js结尾的文件
use:'babel-loader' //对其使用babel-loader
},
{
test:/\.css$/,
use:[
//链式解析 从右到左 先使用css-loader解析 然后传递给style-loader解析
'style-loader',
'css-loader'
]
},
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
添加loader支持字体和图片
安装file-loader或者url-loader
npm i file-loader url-loader -D
//继续在rules数组里面添加对象
//file-loader解析图片
{
test:/\.(png|jpg|gif|jpge)$/,
use:'file-loader' //解析文件 这里也可以使用url-loader
},
//file-loader解析字体
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:'file-loader'
},
//url-loader解析图片
{
test:/\.(png|jpg|gif|jpge)$/,
use:[
{
loader:'url-loader',
options:{
limit:10240 //10K 小于10K 作baes64处理
}
}
]
}
设置webpack watch监听文件改动
这个基础功能是为了我们修改了文件 会及时打包 缺点就是需要手动去刷新页面才能看到效果
package.json
scripts:{
"watch":"webpack --watch"
}
命令行执行npm run watch 开始监听文件
设置server 热更新
由于上面的watch方式每次需要手动去刷新页面，webpack提供插件来热更新
//安装web-dev-server
npm i web-dev-server -D
webpack.config.js
const webpack = require('webpack')
//添加plugins插件，同时设置devServer
plugins:[
new webpack.HotModuleReplacementPlugin(), //WDS 热更新插件
],
devServer:{
contentBase:'./dist',
hot:true,
port:9527 //监听端口 http://localhost:9527
}
设置js文件指纹
一般我们生产环境使用的打包代码都是一长串的字符串 所以我们常见的开发配置，使用了两个配置文件，一个是开发环境，一个是生产环境。新建两个文件webpack.prod.js(生产配置) webpack.dev.js(开发环境)
package.json
"scripts":{
"build":"webpack --config webpack.prod.js",
"dev":"webpack --config webpack.dev.js --open"
}
文件指纹我们一般使用在生产环境，只需要更改配置文件中的output输出项
webpack.prod.js
//单入口
entry:{
index:'./src/index.js',
},
//出口
output:{
//这里的[name]类似占位符(指在上面entry配置的对象的key值 即"index"),若没有则默认为"main"，js的指纹设置 chunkhash 只能在生产环境中使用
filename:'[name]_[chunkhash:8].js', //js 一般使用chunkhash
path:path.resolve(__dirname,'dist') //打包出来的对应磁盘位置
},
设置css文件指纹
前面我们使用的是style-loader打包进head标签里面，其实我们一般是单独打包css文件，这里需要用到插件
npm i mini-css-extract-plugin -D
webpack.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins:[
new MiniCssExtractPlugin({
filename:'[name]_[contenthash:8].css' //这里来指定 css一般使用contenthash
})
],
同时不再使用style-loader,使用刚刚新增的插件的loader
设置压缩css,js,html
压缩js 可以使用内置的 uglifyjs-webpack-plugin插件 但是在webpack4后 如果mode设置成production 会默认启用压缩js
//压缩css 需要插件 optimize-css-assets-webpack-plugin && cssnano(处理器)
npm i optimize-css-assets-webpack-plugin cssnano -D
//压缩单文件html 需要插件 html-webpack-plugin 和 依赖cssnano
npm i html-webpack-plugin cssnano -D
webpack.prod.js
plugins:[
//压缩css
new optimizeCssAssetsWebpackPlugin({
assetNameRegExp:/\.css$/g,
cssProcessor:require('cssnano')
}),
//压缩html
new HtmlWebpackPlugin({
template:path.join(__dirname,'src/index.html'), //应用的模板
filename:'index.html', //名称
chunks:['index'], //打chunks
inject:true,
minify:{
html5:true,
collapseWhitespace:true,
preserveLineBreaks:false,
minifyCSS:true,
minifyJS:true,
removeComments:false
}
})
]
扫一扫
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
