webpack入门——如何配置打包
-
1.创建一个包,初始一个项目(出来一个直接回车就可以了,最后一步询问是否要写进package.json包里,输入yes即可创建出一个package.json)
npm init
-
2.安装
- 2.1
- 2.1.1全局安装(有事安装不了可尝试手机wifi),一般不建议
npm install webpack web-cli -g
- 2.1.2安装成功后查看版本
webpack -v
- 2.1.3卸载
npm uninstall webpack web-cli -g
- 2.1.1全局安装(有事安装不了可尝试手机wifi),一般不建议
- 2.1
- 2.2
- 2.2.1项目中安装
npm install webpack webpack-cli -D
- 2.2.2安装成功后查看版本
npx webpack -v
- 2.2.3卸载
npm uninstall webpack web-cli -D
- 2.2.4查看历史版本号
npm info webpack
- 2.2.4安装到指定版本
npm install webpack@4.16.5 webpack-cli -D
- 2.2.5安装依赖
npm install
- 2.2.1项目中安装
- 3.配置文件
自己新建一个文件-> webpack.config.js
webpack.config.js
// 引入核心模块
const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'production', //打包后是压缩的代码
// mode: 'development', //打包后是不压缩的代码
// entry: './src/index.js', //写法1,打包哪个文件,打包文件入口
entry: {
main:'./src/index.js', //写法2,打包哪个文件,打包文件入口
},
output:{ //把打包好的文件
filename:'bundle.js', //打包好的文件叫什么名字
path: path.resolve(__dirname,'dist') //打包好的文件放在哪个文件夹下,要跟一个绝对路径,__dirname代表的是webpack.config.js所在的当前目录的路径
}
}
- 打包
- 3.1 打包的是默认配置文件webpack.config.js文件
npx webpack
或 - 3.2 打包的是自己定义的文件,eg:webpackconfig.js
npx webpack --config webpackconfig.js
或
npx webpack xxx.js
(切换到src目录下) - 3.3 配置文件package.json文件下的scripts,“bundle”:“webpack”,意思为npm run bundle为运行webpack
npm run bundle
package.json
- 3.1 打包的是默认配置文件webpack.config.js文件
{
"name": "wp",
"version": "1.0.0",
"description": "",
"main": "index.js", // 是否要被外部引用,是就这样写,不是可以删除或注释
"scripts": {
// "test": "echo \"Error: no test specified\" && exit 1"
"bundle":"webpack" //不需要运行npx webpack当运行npm run bundle时可以打包
},
"author": "waiting",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}
}
- 3.4 为什么要安装webpack-cli?
安装后就可以在代码的命令行中正确的运行webpack,如果不安装这个包,就没有办法在命令行中运行webpack或者npx webpack这样的指令