1.新建一个package.json文件
使用命令 npm init
2.安装Webpack
npm install --save-dev webpack 安装webpack
npm install --save-dev webpack-cli 安装webpack-cli脚手架
3.创建文件夹src
创建入口文件main.js,类似vue的main文件把需要用到的js，css等文件引入到main.js中
import './js/index.js'
import './css/index.css'
4.创建webpack.config.js
这是webpack的配置文件，想要的打包压缩等操作都是在这个文件下完成。
基础结构：
module.exports = {
entry: '/src/main.js', //需要打包的js文件路径和名字
output: {
path: _dirname + '/dist', //打包后输出的目标文件的绝对路径（其中_dirname为当前 目录的绝对路径）
filename: './js/bundle-[hash].js' //打包后输入的js文件名及相对于dist目录所在路径
}
}
5.开始打包
输入命令 npm webpack，这是就会出现dist文件夹。
也可以在packsge.js文件中设置
"scripts":{
start: "webpack"
}
在控制台执行npm run start (或者npm start)就可以打包了
Webpack中所提供的各种loader，它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。
6.打包css样式
安装对应的loader：
npm i -D css-loader style-loader
module.exports = {
entry: "/src/main.js", //需要打包的js文件路径和名字
output: {
path: _dirname + "/dist",
filename: "./js/bundle-[hash].js"
},
watch: true, //监听文件改动并自动打包
module: {
rules: [
{
test: /'.css$/, //正则表达式，表示.css后缀的文件
use: ["style-loader", "css-loader"] //针对css文件使用的loader，注意先后顺序靠后的先执行
}
]
}
};
7.打包CSS中的图片
安装对应的loader：
npm i -D file-loader
{
test: /\.(png|jpg|gif|svg)$/, //正则表达式，表示.css后缀的文件
use: 'file-loader'
}
那么如何才能爆出图片名不变，而且也能够添加到指定的目录下？
我们只需要添加一个options属性即可：
{
test: /\.(png|jpg|gif|svg)$/, //正则表达式，表示.css后缀的文件
use: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
其中name属性其实就是图片打包后的路径，其中包括图片名【name】和图片格式【ext】
8.打包js中的图片
安装对应的loader：
npm i -D url-loader
{
test: /\.(png|jpg|gif|svg)$/, //正则表达式，表示.css后缀的文件
use: 'file-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
这里limit属性的作用就是将小于8192B大小的图片转成base64格式。而大于这个大小的图片将会以file-loader的方式进行打包
9.打包HTML
安装对应的loader：
npm i -D html-webpack-plugin
const htmlWebpackPlugin = reqire('html-webpack-plugin')
module.exports = {
entry: "/src/main.js", //需要打包的js文件路径和名字
output: {
path: _dirname + "/dist",
filename: "./js/bundle-[hash].js"
},
watch: true, //监听文件改动并自动打包
module: {
rules: [
{
test: /'.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpg|gif|svg)$/, //正则表达式，表示.css后缀的文件
use: "file-loader"
},
{
test: /\.(png|jpg|gif|svg)$/, //正则表达式，表示.css后缀的文件
use: "file-loader",
options: {
name: "./images/[name].[ext]",
limit: 8192
}
}
]
},
plugins: [
//打包需要的各种插件
new htmlWepackPlugom({
template: "./src/index.html"
})
]
};
10.本地创建服务
安装对应的loader：
npm i -D webpack-dev-server
在package.json中的scripts中添加相关配置
"scripts":{
"dev": "webpack-dev-server --open"
}
其中 --open表示自动打开浏览器
总结：
值得注意的是，通过webpack-dev-server打包后的代码并不会进入dist目录，而是直接创建一个开发服务器，并运行打包后的代码。因此，通常我们会将Webpack打包分为两种模式：开发模式和生产模式。
开发模式顾名思义就是给我们开发时候用的，这时候我们就可以用上webpack-dev-server，从代码自动打包到自动开启浏览器再到自动刷新全部自动化，提高了工作效率；生产模式顾名思义就是最终代码上线时候用的，这时候我们就只需使用其最基础的打包功能，最终打包后的代码会进入dist目录，我们只需要将其上传服务器即可。
网友评论