webpack的使用之入口和出口
1.创建一个文件夹
2.针对想要创建的项目来说,先使用初始化项目
npm init -y
项目初始化完成后,分别安装webpack和webpack的脚手架
npm install webpack -D
npm install webpack-cli -D
3.使用编译器打开项目,这里我使用的是vscode,在项目中新建src目录,在该目录下面新建index.js文件
4.在package.json文件的scripts中新增build,这样我们就可以运行该项目
"scripts": {
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
这里面的production可以换成development,分别对应生产模式和开发模式
到这一步我们就可以试试看前面的配置有没有问题:
在终端中运行如下代码
npm run build
此时我们就可以在项目中看见多了一个文件夹dist,里面有一个main.js文件
5.手工配置webpack,在项目中新建一个webpack.congif.js文件,配置如下代码
- 设置入口文件
module.exports = {
entry: "./src/demo.js", //文件可以修改
}
- 设置出口文件
var path = require("path");
module.exports = {
entry: "./src/demo.js", //文件可以修改
output: {
path: path.resolve(__dirname, "dist"),
filename: "demo.js"
}
}
也可以将入口文件设置成多入口
entry: {
home: "./src/index.js",
leosn: "./src/demo.js"
},
也可以给出口文件配置hash长度,hash:8,就表示hash长度为8
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[hash:8].js"
}
我们也可以指定webpack.config.js文件的位置,在package.json中对scripts中的build进行修改,如下代码
"build": "webpack --mode production --config scripts/webpack.config.js",