• 安装

    1. //全局安装
    2. npm install -g webpack
    3. //安装到你的项目目录
    4. npm install --save-dev webpack

  • 初始化

    1. npm init
    2. 可以自动创建这个package.json文件

  • 使用Webpack

    1. npx webpack src/index.js --output dist/bundle.js
    2. 指定入口和存放路径

由于webpack 默认的入口文件是从./src/index.js,输出是./dist/main.js 。因此可以直接: ```

npx webpack —mode development

  3. - <a name="dnf0vs"></a>
  4. #### 使用配置文件 webpack.config.js
  5. <a name="qg35ys"></a>
  6. ##### 配置说明

// webpack.config.js module.exports = { //入口文件的配置项 entry:{}, //出口文件的配置项 output:{}, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }

  2. - <a name="cg8dhi"></a>
  3. ##### - 入口：**单文件**

module.exports = { entry: “./src/index.js” }

  2. - <a name="ccesps"></a>
  3. ##### - 入口：多文件

// 对象语法 module.exports = { entry: { app: “./sec/app.js”, vendors: “./src/vendors.js” } }

// 应用场景： 分离应用程序、和第三方库入口、多页面应用程序

// 多页面应用程序 const config = { entry: { pageOne: ‘./src/pageOne/index.js’, pageTwo: ‘./src/pageTwo/index.js’, pageThree: ‘./src/pageThree/index.js’ } };

  2. - <a name="ldg2en"></a>
  3. ##### - 出口：单文件

// webpack.config.js const path = require(‘path’); const config = { output: { filename: ‘bundle.js’, path: path.resolve(__dirname, ‘dist’) } };

module.exports = config;

  2. - <a name="fmgvkn"></a>
  3. ##### - 出口：多文件

// { entry: { app: ‘./src/app.js’, search: ‘./src/search.js’ }, output: { filename: ‘[name].js’, path: __dirname + ‘/dist’ } } // 这里的[name]是占位符,之后会替换为 app、search // 写入到硬盘：./dist/app.js, ./dist/search.js

  3. - <a name="c0kboq"></a>
  4. #### NPM 脚本(NPM Scripts)

// package.json { “name”: “webpack_new_test”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1”, “build”: “webpack —mode development” // “build”: “webpack —config webpack.config.js —mode development” // 上面两种配置等价，—config webpack.config.js可以不写，默认是它。 // webpack 4.0之后多了mode的配置，因此我们需要配置一下，不然会出现警告哦 }, “author”: “”, “license”: “ISC”, “devDependencies”: { “webpack”: “^4.4.1”, “webpack-cli”: “^2.0.13” } }

运行一下 npm run build ```