首先创建一个新的目录,然后初始化npm,在本地安装webpack和webpack-cli
npm init -y
npm install webpack webpack-cli -D //-D 表示开发依赖,上线的时候不需要
webpack可以进行零配置(弱配置)
webpack打包工具,将js代码进行打包(按js模块),可以将js代码模块化。
npx webpack //默认将index.js的代码打包成dist目录下的main.js
运行npx webpack会进入node_modules/bin/webpack.cmd文件执行
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\webpack\bin\webpack.js" %*
)
判断是否有node.exe没有则执行上一级webpack文件中的\bin\webpack.js文件
手动配置webpack
默认配置文件名是webpack.config.js
// webpack.config.js文件的内容
// webpack是node写出来的 node的写法
let path = require('path')
module.exports = {
mode: 'development', // 模式默认有两种production(生产模式)、development(开发模式),开发模式的代码不压缩看的清晰
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.[hash:8].js', // 打包后文件名,[hash:8]表示每次打包都在文件名中加入一个 hash值,并且只显示前8位
path: path.resolve(__dirname, 'dist'), // 打包后路径必须是绝对路径resolve方法把相对路径解析成绝对路径,__dirname加不加都可以,它代表在当前目录下产生一个dist目录
},
}
如果要更改配置文件的文件名,在打包时可以使用 npx webpacck --config 文件名.js 语句。
另一种方法是在package.json文件中添加脚本(如果没有这个文件可以新建一个):
{
"scripts": {
"build": "webpack --config webpack.config.my.js"
}
}
这样在运行时可以使用npm run build语句来配置webpack。
使用开发服务
使用开发服务可以在内存中进行虚拟打包,并返回一个localhost地址来展现结果。使用npm来安装开发服务
npm install webpack-dev-server -D
可以使用npx webpack-dev-server来运行开发服务,但会以当前目录为静态目录。
可以在webpack.config.js中的module.exports中添加开发服务的配置
devServer: { // 开发服务器的配置
port: 3000, // 改端口
progress: true, // 进度条
contentBase: './build' // 以build目录为静态目录
// compress: true // 压缩
}
如果当前目录下没有build目录那打包生成的localhost就会出错。此时可以使用html-webpack-plugin插件来自动生成一个html文件打包到内存中。使用npm来安装插件
npm install html-webpack-plugin -D
在webpack.config.js中创建一个变量引入html-webpack-plugin插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
然后在module.exports中添加html-webpack-plugin插件的配置,这里可以建立一个存放所有webpack插件的配置的数组,方便以后引入跟多的插件
plugins: [ // 存放webpack插件的配置的数组
new HtmlWebpackPlugin({
template: './src/index.html', // 模板的位置
filename: 'index.html', // 打包后的文件名
minify: { // 压缩html文件
removeAttributeQuotes: true, // 删除html标签属性中的双引号
collapseWhitespace: true // 将代码变成一行
},
hash: true // 在引入script文件时带上一个hash值
})
]