webpack4的使用之入口和出口

本是古典何须时尚 2022-12-23 14:24 181阅读 0赞

## 1 全局安装 npm install webpack -g (不建议使用) ##

## 2:针对项目而言 先npm init初始化项目以后 ##

nmp init
    npm install --save-dev webpack
    npm install --save-dev webpack-cli   (4.0以下的版本不用安装webpack-cli)

## 3:项目中（根目录）新建一个src目录 里面放一个index.js ##

## 4:在package.json中配置script中加入 ##

"scripts": {
            "build": "webpack --mode production",
            "test": "echo \"Error: no test specified\" && exit 1"
        },

*–production 可以换成–development 生产模式(线上要压缩处理)和开发模式(本地随便写)*

写完以后启动  
运行 npm run build 就会发现项目中多出一个dist文件 里面有一个main.js  
手工配置webpack

## 5.在项目中（根目录）新建一个webpack.config.js文件 ##

//写入基本配置就可以修改 入口文件  
module.exports = \{  
entry: “./src/index.js”, //如果文件 可以修改  
\}  
设置出口文件  
var path = require(“path”);  
module.exports = \{  
entry: “./src/index.js”, //如果文件 可以修改  
output: \{  
path: path.resolve(\_\_dirname, “dist”),  
filename: “index.js”  
\}  
\}

也可以多入口 入口需要变成变成对象写法  
entry: \{  
home: “./src/index.js”,  
leosn: “./src/leson.js”  
\},

也可以个配置出口进行hash混淆 指定hash长度 hash:8 就表示长度为8  
output: \{  
path: path.resolve(\_\_dirname, “dist”),  
filename: “\[name\].\[hash:8\].js”  
\}

更可以根据模块生成不一样的hash 使用chunkHash代替hash

也可以指定webpack.congfig.js的位置 可以修改  
“build”: “webpack --mode production --config scripts/webpack.config.js”,