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

关于Webpack 3.10.0 配置详细指南

众多开发者在使用Webpack的时候，往往会遇到配置上的困惑，特别是对最新版本的Webpack进行配置时，某些插件容易产生兼容性问题。本文将详细介绍如何在Webpack 3.10.0版本中实现项目的快速搭建及优化配置。

---

1. 项目准备工具

在开始配置之前，需要确保项目的运行环境具备以下工具：

• Node.js：建议安装Node.js V4.4.7，确保npm版本为5.6.0。
• Git：使用windows版本的Git，项目将在Git Bash Here中进行操作。

---

2. Git远程仓库的建立

对于从零开始的新项目，可以按照以下步骤创建Git远程仓库：

步骤1：新建项目结构

your-project/
├── src/
│   ├── layout/
│   │   └── html-head.html
│   ├── page/
│   │   ├── index/
│   │   │   └── index.js
│   │   └── login/
│   │       └── index.js
│   ├── assets/
│   └── public/

步骤2：初始化仓库

执行命令：

git init

步骤3：关联远程仓库

根据你的GitHub仓库地址，执行以下命令：

git remote add origin ssh://github.com/username/your-project.git

步骤4：配置.gitignore文件

添加以下内容至.gitignore文件：

.DS_Store
/node_modules/
/dist/

步骤5：将文件加入仓库

执行命令：

git add .
git commit -m "项目初始化"
git push -u origin master

此外，在实际开发中，建议先在dev分支中进行代码提交：

git checkout -b dev

---

3. 项目脚手架搭建

步骤1：npm初始化

执行命令：

npm init -y

步骤2：安装必要工具

全局安装Webpack及相关插件：

npm install webpack@3.10.0 -g

本地安装其他工具及依赖（注意：插件版本需与Webpack兼容）：

npm install webpack@3.10.0 --save-dev

步骤3：配置Webpack配置文件

创建或更新webpack.config.js：

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlPlugin = require('html-webpack-plugin');
// 入口文件配置
module.exports = {
    entry: {
        'common': ['./src/page/common/index.js'],
        'index': ['./src/page/index/index.js'],
        'login': ['./src/page/login/index.js']
    },
    // 输出路径及文件名
    output: {
        path: './dist',
        filename: '[name].js'
    },
    // 外部依赖声明
    externals: {
        'jquery': 'window.jQuery'
    },
    // CSS和图片处理
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot|otf)$/,
                loader: 'file-loader?limit=1000&name=resource/[name].[ext]'
            }
        ]
    },
    // 提取公共代码
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        }),
        new ExtractTextPlugin({
            filename: 'css/[name].css'
        })
    ],
    
    // HTML处理
    html: {
        inject: true,
        hash: true
    }
};

---

4. 关于模块处理的优化

4.1 使用CommonsChunkPlugin提取公共模块

如果有多个共享模块，可以按照以下方式进行配置：

{
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        })
    ]
}

4.2 引用第三方库

为避免重复引入，可以在externals中声明：

externals: {
    'jquery': 'window.jQuery'
}

---

5. 关于样式处理

5.1 配置CSS加载器

安装相关插件：

npm install css-loader style-loader@0.19.1 --save-dev

在webpack.config.js中配置：

{
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' }
        ]
    }
}

5.2 提取CSS到独立文件

安装ExtractTextPlugin：

npm install extract-text-webpack-plugin@2.1.2 --save-dev

配置：

{
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].css'
        })
    ]
}

---

6. 关于HTML模板处理

6.1 安装相关插件

执行命令：

npm install html-webpack-plugin@2.30.1 html-loader@0.5.1 --save-dev

在webpack.config.js中配置：

{
    html: {
        template: './src/layout/html-head.html',
        filename: 'view/[name].html',
        inject: true,
        hash: true,
        chunks: ['common', 'name']
    }
}

---

7. 关于图片处理

7.1 URL加载器

安装：

npm install url-loader@0.6.2 --save-dev

配置：

{
    module: {
        loaders: [
            {
                test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot|otf)$/,
                loader: 'url-loader?limit=1000&name=resource/[name].[ext]'
            }
        ]
    }
}

---

8. 关于Webpack-dev-server的安装及配置

8.1 全局安装

npm install webpack-dev-server@2.9.7 -g

8.2 项目配置

在webpack.config.js中添加：

{
    entry: {
        common: ['./src/page/common/index.js', 'webpack-dev-server/client?http://localhost:8088/']
    }
}

8.3 启动命令

WEBPACK_ENV=dev webpack-dev-server --inline --port 8088

---

9. 关于优化及命令

9.1 自动化脚本

在package.json中添加：

{
    "scripts": {
        "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
        "dist": "WEBPACK_ENV=online webpack -p"
    }
}

9.2 操作示例

• Linux/Mac：

npm run dev

• Windows：

npm run dev_win

---

通过以上配置，你可以快速搭建一个基于Webpack 3.10.0的项目，并优化代码打包流程。每次修改后，只需运行npm run dev即可自动刷新页面。

转载地址：http://gdsuk.baihongyu.com/