# webpack3.10.0

**Repository Path**: jiangchengbao/webpack3.10.0

## Basic Information

- **Project Name**: webpack3.10.0
- **Description**: webpack 开发常用配置
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-01-28
- **Last Updated**: 2022-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack 3.10.0
webpack 3.10.0 开发常用配置


## 功能

- 支持css，js压缩，js混淆
- 通过postcss,压缩css，合成雪碧图,build时候厂商前缀自动补齐
- js模块化打包，通过babel转换es6语法和新增api
- 支持webpack-dev-server热更新和热替换
- eslint语法检查，统一编码规范和检查常见的语法错误
- Handlebars提取公共html片段，合成完整html
- 提取和分离css，js文件
- 支持source-map方便编译后代码错误的定位

## 配置步骤


1. 初始化package.json,执行命令  _npm init -f_ 成功后，打开package.json文件，如下图：
![输入图片说明](https://gitee.com/uploads/images/2018/0129/215634_a8caed91_124921.png "屏幕截图.png")
2. 创建项目文件，在项目文件下执行  _npm install --save-dev webpack_   安装webpack,安装成功后，打开package.json文件，删除"scripts"下面的"test",添加如下键：
 "scripts": {
        "build": "webpack --config webpack.prod.js",
        "dev": "webpack --config webpack.dev.js",
        "watch": "webpack --watch",
        "wds": "webpack-dev-server --config webpack.dev.js"
        }
3. 创建空文件，项目目录如下：
![输入图片说明](https://gitee.com/uploads/images/2018/0129/221115_7ab0965d_124921.png "屏幕截图.png")
   
- common--用以存放项目公共js。
- config-data--用以存放静态页面示例数据，供Handlebars模板生成用，将示例数据和webpack配置信息分离，简化webpack配置信息。
- data----用以存放json文件，模拟项目中服务端返回的接口数据。
- fonts---用以存放项目中使用的字体文件。
- hbs-----用以存放Handlebars模板文件。
- images--用以存放项目中使用的图片。
- js------用以存放js文件，通常是业务代码
- less----用以存放项目页面的样式。
- modules--用以存放项目中公共的Handlebars模块，比如，页面的meta,header,footer,nav等信息。
- temp----用以存放Handlebars生成的临时文件。



4. 安装 webpack-merge 执行命令 _ npm install --save-dev webpack-merge 该模块用于提取生成环境和开发环境webpack中的公共配置
   项。
5. 安装 handlebars 插件，执行命令  _npm install --save-dev handlebars-webpack-plugin_ ,该插件用于将页面中公共的模块提取出
  来， 方便复用。
6. 安装 html-webpack-plugin 插件，执行命令  _npm install --save-dev html-webpack-plugin_ 该插件用于提取html，将handlebars        
  生成的临时html文件拷贝到dist目录下，方便css,js文件分离。
7. 安装css和less loader,执行命令   _npm install --save-dev style-loader css-loader less-loader less _ ,该loader用于转换
   css和less。
   
- 安装postcss loader  _npm install --save-dev postcss-loader _ 该loader是css处理的平台，合成雪碧图，修改css中图片路径等loader依赖于该平台。
- 安装postcss-sprites  _npm install --save-dev postcss-sprites _ 该loader用于合成雪碧图。
- 安装postcss-import   _npm install --save-dev postcss-import _ 该loader用于修改构建输出css文件中图片路径的修改。
- 安装autoprefixer   _npm install --save-dev autoprefixer _ 该loader用于自动补齐css某些属性的厂商前缀。
- 安装cssnano   _npm install --save-devcssnano _ 该loader用于压缩css。

8. 安装 file-loader ，用于拷贝less中的图片文件和字体文件，执行命令  _npm install --save-dev file-loader_ 
9. 安装 extract-text-webpack-plugin 插件，用于将CSS从主应用程序中分离，执行命令  _npm install --save-dev extract-text-webpack-plugin_
10. 安装 clean-webpack-plugin 插件，用于每次生成前清理dist目录，执行命令  _npm install --save-dev clean-webpack-plugin_
11. 安装 handlebars-webpack-plugin 插件，用于将页面中的公共模块抽离出来，构建的时候合成html文件，执行命令  _npm install --save-dev handlebars-webpack-plugin_。
12. 安装 html-webpack-plugin 插件，用于在dist目录下生成html文件 并且将script标签插入到html中，执行命令  _npm install --save-dev html-webpack-plugin_。
13. 安装 uglifyjs-webpack-plugin 插件，用于压缩混淆js代码，执行命令  _npm install --save-dev uglifyjs-webpack-plugin_。
14. 安装 babel-loader，该loader用于转换新一代js语法，执行命令  _npm install --save-dev babel-loader_。
- 安装babel-core   _npm install --save-dev babel-core_ 该js包，包含了新一代JS语法的api的ES5实现。
- 安装babel-polyfill   _npm install --save-dev babel-polyfill_ 该js包用于自动转换新一代JS语法中新的api es5实现，依赖于包babel-core（将新一代js语法中全部api打包）。
- 安装babel-plugin-transform-runtime babel-runtime   _npm install --save-dev babel-plugin-transform-runtime babel-runtime_ 该包用于按需打包新一代js语法中api的es5实现，以及创建沙盒防止污染原型链，方便编写js类库。注意：按需打包只针对静态函数,比如Array.from可以成功打包为ES5，[].includes，实例函数则不能打包，任然需要在代码中手动引用。
- 安装babel-preset-env   _npm install --save-dev babel-preset-env_ 该JS包，转换新一代JS语法为es5实现。

15. 安装 eslint-loader eslint，该loader 用于检查js代码是否符合规范，是否有语法错误，它的目标是保证代码的一致性和避免错误，执行命令  _npm install --save-dev eslint-loader eslint_。

16. 安装 webpack-dev-server，该JS包，启用node.js开发的小型web服务器，方便开发时候热替换和热加载，提高开发效率，执行命令  _npm install --save-dev webpack-dev-server_（开发时候页面自动刷新，组件局部刷新）。

### ps:webpack-dev-server插件和handlebars插件不兼容，启动改web服务器时候，请注释handlebar相关配置。