博客
关于我
web项目的构建流程及webpack3.10.0的使用
阅读量:791 次
发布时间:2019-03-25

本文共 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/

你可能感兴趣的文章
MS Edge浏览器“STATUS_INVALID_IMAGE_HASH“兼容性问题
查看>>
ms sql server 2008 sp2更新异常
查看>>
MS UC 2013-0-Prepare Tool
查看>>
MSBuild 教程(2)
查看>>
msbuild发布web应用程序
查看>>
MSB与LSB
查看>>
MSCRM调用外部JS文件
查看>>
MSCRM调用外部JS文件
查看>>
MSEdgeDriver (Chromium) 不适用于版本 >= 79.0.313 (Canary)
查看>>
MsEdgeTTS开源项目使用教程
查看>>
msf
查看>>
MSSQL数据库查询优化(一)
查看>>
MSSQL数据库迁移到Oracle(二)
查看>>
MSSQL日期格式转换函数(使用CONVERT)
查看>>
MSTP多生成树协议(第二课)
查看>>
MSTP是什么?有哪些专有名词?
查看>>
Mstsc 远程桌面链接 And 网络映射
查看>>
Myeclipse常用快捷键
查看>>
MyEclipse更改项目名web发布名字不改问题
查看>>
MyEclipse用(JDBC)连接SQL出现的问题~
查看>>