Webpack自动打包

2022-06-04 04:54:59

2.自动化Webpack打包

1.目录结构

2.搭建与运行

1.在根目录新建webpack.config.js文件此名称固定不可更改，否则系统无法识别到

2.在根目录初始化 npm init -y，生成pack.json文件，如pack.json有依赖时 npm install安装依赖。

3.引入绝对路径

const path = require("path");

4.指定打包文件出入口

const path = require("path");
module.exports = {
    // 指定打包入口文件
    entry:"./src/main.js",
    outpath:{
        // 动态获取路径
        path:path.resolve(__dirname,‘./dist‘),
        // 指定打包出口文件
        filename:"bundle.js"
    }
}

5.集成终端输入webpack命令运行打包程序

6.将运行命令webpack修改为 npm run build

在package.json文件中添加代码 "build":"webpack"

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

3.开发依赖的安装

在存在pack.json文件的集成终端中运行npm install webpack@3.6.0 --save-dev 完成安装，此时package.json出现开发依赖代码

 "devDependencies": {
    "webpack": "^3.6.0"
  }

4.局部运行与全局运行

npm run build //局部
webpack  //全局

3.css-loader打包