webpack

1.webpack是什么？
webpack是用于现代JavaScript应用程序的模块绑定器。
简单的说就是打包工具，将一些scss、less、jsx 、es6语法的文件进行编码转义打包成浏览器识别的资源文件

2.webpack关注的点是什么？
四核心概念：入门，输出，加载程序和插件

3.环境如何搭建？
简单操作：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

注意：建议使用国内的淘宝镜像做下面安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
下面的npm统一换成cnpm

1）安装nodejs环境，下载nodejs安装 ，使用npm包管理器来进行如下的安装
删除node module操作：
步骤一： npm install -g rimraf
使用 cd xxx[include node_modules folder] 切换到某个目录下
步骤二：rimraf node_modules
npm cache clean
卸载操作：npm uninstall [name]

2）安装webpack
npm install webpack -g //全局安装
npm install --save-dev webpack //项目依赖安装

 npm init  //初始化npm配置文件
 npm init -y：初始化一个package.json文件，加上-y就会默认生成该文件，无需一步一步填写；
 npm docs 包名：查看包的文档；npm install：安装package.json中dependencies属性中所有依赖的包

3）安装webpack服务器（可以不用修改模块后浏览器自动刷新等）
npm install webpack-dev-server -g //全局安装
npm install --save-dev webpack-dev-server //项目依赖
//启动服务
webpack-dev-server --progress --colors 可以实时刷新

4）安装loader加载器
处理相关css文件的
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev sass-loader(保证已经安装了node-sass)
npm install --save-dev less-loader(保证已经安装了less)
npm install autoprefixer -g(autoprefixer是postcss的插件)
npm install --save-dev autoprefixer
npm install --save-dev postcss-loader

    处理相关js的
     npm install --save-dev babel-core
     npm install --save-dev babel-loader
     npm install --save-dev babel-preset-es2015
     npm install --save-dev babel-preset-react
     npm install --save-dev jsx-loader

    处理相关图片的
     npm install --save-dev url-loader
     npm install --save-dev image-webpack-loader（图片压缩）

   处理json文件的(注意：webpack2.x已经不需要安装)
    //npm install --save-dev json-loader(webpack1.x需要安装)

   文件处理（类似字体图标库、单个图片文件等等）
     npm install --save-dev file-loader

    loaders之 html处理raw-loader  npm install --save-dev raw-loader

5）安装插件
5.1）自动生成前端模板文件的
npm install html-webpack-plugin --save-dev
5.2）将css单独打包 这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin
5.3）压缩依赖的插件：
npm install --save-dev compression-webpack-plugin
5.4)
npm install --save-dev chunk-manifest-webpack-plugin
npm install --save-dev webpack-chunk-hash
5.5）生成环境中将代码的插件（常用）
npm install uglifyjs-webpack-plugin --save-dev

代码热替换：HotModuleReplacementPlugin
生成html文件：HtmlWebpackPlugin
报错但不退出webpack进程：NoErrorsPlugin
代码压缩：UglifyJsPlugin
自动打开浏览器： OpenBrowserPlugin
设置环境变量： DefinePlugin

4.打包
方式一：webpack 入口文件js 生成文件js
方式二：webpack (通过配置webpack.config.js文件)
方式三：npm start (通过配置package.json文件)
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法；实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码

5.webpack.config.js(配置文件)
请注意，在整个配置中，我们使用Node的内置路径模块，并将其前缀为__dirname全局。这可以防止操作系统之间的文件路径问题，并允许相对路径按预期工作
entry: 入口,定义要打包的文件
output: 出口，定义打包输出的文件；包括路径，文件名，还可能有运行时的访问路径（publicPath）参数
module: webpack将所有的资源都看做是模块，而模块就需要加载器；主要定义一些loaders,定义哪些后缀名的文件应该用哪些loader
test: 检测哪些文件需要此loader，是一个正则表达式
exclude: 忽略哪些文件
resolve: ()定义能够被打包的文件，文件后缀名
plugins: 定义一些额外的插件