webpack的配置

1.npm install -g webpack
2.配置webpack.config.js文件，文件的配置类似于gulp
3.通过配置文件中的entry获取到文件，output将文件输出
4.webpack通过loader（加载器）和plugin（插件）处理文件 eslint做js的文件检测

webpack的项目打包

webpack主要是以模块化的方式打包整个项目文件，是用来打包SPA应用的前端代码

使用webpack的相关步骤

1.下载全局webpack包
npm install -g webpack
2.创建webpack.config.js文件

webpack基础命令

1.webpack -p 压缩js代码
2.–progress 查看进度
1. –color 让命令有颜色
1. –config webpack.dev.config.js 指定webpack所运行的配置文件

webpack2

将原有的loaders改成了rules其他用法基本不变，同时loaders也能兼容使用

loader 加载器

css-loader

用来将css样式导入到最后生成的文件中
npm install css-loader --save-dev

style-loader

-用来将最后生成文件中的样式加载到页面中
npm install css-loader --save-dev
- 使用demo

 { 
     test:/\.css$/,
     loader:'style-loader!css-loader'            
 }

sass-loader

用来对sass文件处理将其sass转换成css样式

url-loader

用来处理图片
- 以前的时候还需要系在file-loader
npm install --save-dev url-loader

{ 
     //使用limit来限制图片，如果超过设置大小按照原样输出，如果小于就按照base64编码格式输出
     //通过name来限制最后输出的文件名[name]是文件的名称，[ext]是文件的后缀，文件最后怎么拿到将怎么生成出来到dist目录下
    test:/\.(png|j pg|jpeg|svg|gif)$/, 
    loader:'url-loader?limit=88474&name=img/[name].[ext]'
}

babel-loader

用来将es6=>es5的代码
在使用的过程中需要用到babel-loader的自己的插件
npm install --save-dev babel-loader babel-preset-es2015

- 如果有遇到es6代码没办法转换成es5，那个需要考虑将stage-0 stage-1 stage-2 stage-3 一并下载

{ test:/\.js$/, loader:'babel-loader', //query用来加载babel-loader他自己的插件 query: { presets: ['es2015'] }

plugins（插件）运行之前做一些基本事情

webpack压缩

其实webpack -p 就是调用了webpack.optimize.UglifyJsPlugin来对代码进行处理
步骤
1.下载webpack 到本地
npm install webpack --save-dev
2.在webpack.config.js中引用webpack
var webpack=require('webpack');
3.在后面的plugins调用webpack

  new webpack.optimize.UglifyJsPlugin({
             compress:{
                 warnings:false //取消提示警告
             }
         })

分离第三方或者共有模块

1.将entry入口文件改造

 entry:{
      app:__dirname+'/src/js/main.js',
      venders:['jquery'] //给需要拆分的模块提供一个数组，并给它一个名字
   },

- 2.通过webpack.optimize.CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin({ name:'venders',//需要分离的名称 filename:'venders.js' //分离后的名称 }),

分离css样式

1.下载分离css分离模块
npm install --save-dev extract-text-webpack-plugin
2.应用分离模块
var ExtractTextPlugin = require("extract-text-webpack-plugin");
3.在原有css样式处理上添加css分离模块

 {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }

4.在plugins中添加最后分离出来的名称

new ExtractTextPlugin("styles.css"),

移动创建html文件

1.下载创建html插件
npm install html-webpack-plugin --save-dev
2.在plugins中添加

new HtmlWebpackPlugin({
            title:'测试', //改变title的名称,
            filename:'index.html',//最后生成的html名称
            template:'src/index.html',//生成html所需要的模板
            minify:{
                //通过minify对原有的html进行压缩
                collapseWhitespace:true,//去除所有的空格
                removeComments:true,//去除所有的注释
            }
        })

### 自动删除dist文件
- 1.下载
npm install clean-webpack-plugin --save-dev
- 2.引用自动删除插件
var CleanWebpackPlugin = require('clean-webpack-plugin');
- 3.在plugins插件中调用自动删除插件
new CleanWebpackPlugin(['dist']) //一开始就会执行，dist就是你要删除的文件

自动开启webpack服务器

1.下载
npm install -g webpack-dev-server
2通过命令行使用
–progress用来查看打包进度
–inline和–hot用来做热加载
–port用来设置开启端口
–open用来自动打开浏览器
webpack-dev-server --progress --color --inline --hot --port 3001 --open
区别:

webpack 会在硬盘生成dist文件夹
webpack-dev-server 没有生成dist。在内存中生成的~
cpu =>内存 => 硬盘

eslint 检测代码规范