webpack v3之基础搭建二

版本：v3，配置项参考中文文档，任意webpack相关配置项均可直接输入搜索

加入不同配置进行项目搭建的示例（稍微简单的版本）：点此进入

package.json

script start配置知识点

1. cross-env：跨平台设置(cross-platform-set)环境变量

script脚本： cross-env NODE_ENV=xxx（注意：NODE_ENV可为任意你想配置的命名，获取时一一对应即可）

webpack config中通过变量获取：env = process.env.NODE_ENV

2.webpack-dev-server（注意webpack版本兼容问题）

用于快速开发，详见中文文档

需结合plugins（插件）： webpack.HotModuleReplacementPlugin() ，详见中文文档

相关脚本：webpack-dev-server --config webpack.dev.config.js --color --progress --inline --open，对应如下：

下图的config变量配置

--config指定文件所在，其余为需要的配置

---

webpack

1.webpack-merge 

用于构建生产和开发环境分离，例：生产环境的一些配置开发环境无需支持（如代码压缩等），则可公用一份基础webpack配置（公用），而开发与生产不同的配置各写一份，通过merge合并基础配置并利用script进行环境变量配置

配置分离

2.devtool（开发工具）

中文文档参考，不做详细说明

3.plugins（插件）

中文文档参考

基础plugins

@清除目标文件中重复的文件的插件：clean-webpack-plugin ，用法如图

@自动生成目标入口文件的插件：html-webpack-plugin，无任何配置版的插件效果如下（html中有效）：

无配置版本

示例中的配置解释（全部配置入口）：

filename：配置生成的html的文件名

template：指定用来生成特定的 html 文件的模板文件（可以是任意格式的模板，不仅仅是html文件，根据自己所需来配置即可）

inject：注入选项，有四个值可选，即：配置内容需注入到template的哪个部分

inject可选配置值

（以下为可选配置，即自定义，用法同title）

title：配置生成的html的标题

title配置及用法

favicon：给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。

@css等样式相关的处理插件 ：extract-text-webpack-plugin

为抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象，用法见下下图

plugins中

use：指需要什么样的loader去编译文件，这里由于源文件是.css所以选择css-loader

fallback：编译后用什么loader来提取css文件

publicfile：用来覆盖项目路径，生成该css文件的文件路径

@创建一个在编译时可以配置的全局常量：DefinePlugin（js中有效、html及样式无效）

4.多入口文件

                                                                            除去在path指定的目录中生成文件外，                                                                                                       还会将此两个入口的js作为script标签直接注入到template指定的inject位置template与inject均为配置项，见上图）

output配置属性值

[name].[hash:5].js：name为entry的属性名称，hash为唯一哈希值（取5位）

5.resolve

@别名：alias（html中无效、js及css中有效）

创建 import 或 require 的别名，来确保模块引入变得更简单

6.loaders

style-loader：更多用法，见文档

style-loader

sass-loader：更多信息，详见文档

css-loader：更多信息，见css-loader文档

url-loader：详见文档

file-loader：详见文档

7.babel配置及依赖

中文文档地址