webpack项目初始化

开发模式

1、（命令行）安装

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

最好，使用yarn 安装（推荐）

mkdir webpack-demo && cd webpack-demo
yarn init -y
yarn add webpack webpack-cli -D

2、配置index文件
（1）yarn add lodash, （命令行）导入lodash。
（2）创建 index.html 和 ./src/index.js
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue项目初始化</title>
</head>
<body>
<script src="app.bundle.js"></script>
</body>
</html>

index.js

import _ from 'lodash';

function component() {
    var element = document.createElement('div');

    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

3、配置已经生成的package.json文件
// 注意：下面两个( dependencies,devDependencies)是yarn add安装的插件自动生成的，当然，也能手动导入，执行yarn install 安装
// 注意：下面两个是yarn add安装的插件自动生成的，当然，也能手动导入，执行yarn install 安装

{
  "name": "vue-cus",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "author": "pzz",
  "license": "MIT",
  "scripts": {
  "start": "webpack-dev-server --config build/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "dependencies": {},
  "devDependencies": {
    "@types/lodash": "^4.14.144",
    "lodash": "^4.17.15",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

4、创建build文件夹，./build/webpack.config.js 文件

const path = require('path');

module.exports = {
    entry: {
        app:'./src/index.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

5、导入插件 webpack-dev-server

yarn add webpack-dev-server -D

6、运行

yarn run start

生产模式

1、将webpack.config.js，build文件夹重新划分成三个文件

build
 |- webpack.common.js
 |- webpack.dev.js
 |- webpack.prod.js

2、（命令行）安装

yarn add webpack-merge -D

3、修改build内的三个配置文件
webpack.common.js

const path = require('path');

module.exports = {
    entry: {
        app:'./src/index.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode:'development',
    // devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
});

webpack.prod.js

const merge = require('webpack-merge');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode:'production',
    plugins: [
        // new UglifyJSPlugin()
    ]
});

4、修改package.json文件内的scripts

 "scripts": {
    "start": "webpack-dev-server --config build/webpack.common.js",
    "build": "webpack --config build/webpack.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

5、生成bundle包

yarn run build

注意：如果生产环境，生成build包，最好在打生产包前，清理dist文件夹下的内容，可以使用第三方插件 clean-webpack-plugin

参考：

更加详细，理解初识化配置：
webpack指南

最后编辑于：2019.10.25 17:53:14