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

关于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/