webpack 从0 手动配置-白红宇

webpack 从0 手动配置

阅读量：4879 次

发布时间：2019-06-11

本文共 1282 字，大约阅读时间需要 4 分钟。

1. npm init

2. npm install -D webpack webpack-cli

3. 创建webpack入口文件( 默认 webpack.config.js 可以通过 webpack --config XX(FileName)). 并配置build 配置

5. package.json 中配置执行webpack build 命令.

示例:

// webpack.config.dllPlugin.jsconst path = require('path')const webpack = require('webpack')module.exports = {  mode: 'production', // development  entry: {    // 依赖的库数组    vendor: [      'prop-types',      'babel-polyfill',      'react',      'react-dom',      'react-router-dom',    ]  },  output: {    path: path.join(__dirname, 'dist'),    filename: '[name].js',    library: '[name]_[hash]',  },  plugins: [    new webpack.DllPlugin({      // dllPlugin的name属性需要和libary保持一致      name: '[name]_[hash]',      path: path.join(__dirname, 'dist', '[name]-manifest.json'),      // context需要和webpack.config.js保持一致      context: __dirname,    })  ]}

package.json

{  "scripts": {    "start": "webpack",    "dll": "webpack --config webpack.config.dllPlugin.js"  },  "author": "",  "license": "ISC",  "dependencies": {    "babel-polyfill": "^6.26.0",    "prop-types": "^15.6.2",    "react": "^16.6.1",    "react-dom": "^16.6.1",    "react-router-dom": "^4.3.1"  },  "devDependencies": {    "webpack": "^4.25.1",    "webpack-cli": "^3.1.2"  }}

运行结果: