webpack 初探

4.0 和 3.0 版本 不一样

1、 npm install --save-dev webpack

2、npm install --save-dev webpack-cli

配置文件webpack.config.js

module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

• entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
• output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
• module：配置模块，主要是解析CSS和图片转换压缩等功能。
• plugins：配置插件，根据你的需要配置不同功能的插件。
• devServer：配置开发服务功能

Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：

webpack {entry file} -o {destination for bundled file} 4.0的命令 需加 -o

• {entery file}:入口文件的路径，本文中就是src/entery.js的路径；
• {destination for bundled file}:填写打包后存放的路径。
• 注意：在命令行中是不需要写{ }的。
• 第一次运行完 之后直接 webpack 项目中需要在package.json中进行配置相关命令 进行打包和启动

entry 可以以模块的方式进行配置

entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},

output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
},

path.resolve(__dirname,’dist’)就是获取了项目的绝对路径
别忘了记得引入path const path = require('path');

多入口、多出口配置

const path = `require`('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。

设置webpack-dev-server 服务和热更新

npm install webpack-dev-server –save-dev 安装相关插件

devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:5555
}

• contentBase:配置服务器基本运行路径，用于找到程序打包地址。
• host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用localhost。
• compress：服务器端压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。
• port：服务运行端口，建议不使用80，很容易被占用，这里使用了5555.

如果需要启动 还需要在package.json里面进行配置

"scripts": {
    "server":"webpack-dev-server"
 },

配置好之后进行 npm run server
如果自动打开 需要在后面加上 --open

"scripts": {
    "server":"webpack-dev-server --open"
 },

---

模块：CSS文件打包

优点：
减少http的请求数

在学习CSS打包之前，需要先对webpack.config.js里的Loaders配置项进行了解。

Loaders

Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以识别的脚本和工具，从而对不同的文件格式进行特定处理。

简单的举几个Loaders使用例子：

• 可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
• 可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
• 可以把React中的JSX转换成JavaScript代码。

注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。

下面我们对Loaders的配置型简单梳理一下。

• test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
• use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）。

简单的举几个Loaders使用例子：

• 可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
• 可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
• 可以把React中的JSX转换成JavaScript代码。

注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。

• test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
• use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）。

打包css

webpack 打包后会自动生成dist文件，文件里面有相对应的打包后的文件

下面只是webpack中需要做的配置 css以及less sass都和平时的写法一样

这里我们需要两个解析用的loader，分别是style-loader和css-loader。

npm install style-loader css-loader --save-dev

style-loader: 它是用来处理css文件中的url()
css-loader: 用来将css插入到页面的style标签中

webpack.config.js

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

loader的三种写法

第一种写法：直接用use。

    module:{
            rules:[
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                }
            ]
            
        
       
第二种写法：把use换成loader。
    module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },
    


第三种写法：用use+loader的写法：
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },

JS压缩

这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。

我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件

const uglify = require('uglifyjs-webpack-plugin');

引入后在plugins配置里new一个 uglify对象就可以了，代码如下。

plugins:[
        new uglify()
    ],

现在webpack.config.js文件中的所有代码

const path=`require`('path');
const uglify = `require`('uglifyjs-webpack-plugin');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins:[
        new uglify()
    ],
    devServer:{
       contentBase:path.resolve(__dirname,'dist'),
       host:'192.168.1.1',
       compress:true,
       port:5555
    }
}

host 对应的是本机的ip  查询本机ip   终端输入 ipconfig

此时 跑npm run server 会报错 

原因是测试环境的js代码完全不需要压缩，我们需要根据明确的报错行数和错误信息进行寻找错的所在点 
而生产环境中才会压缩JS代码，用于加快程序的工作效率。
devServer用于开发环境，而压缩JS用于生产环境，在开发环境中作生产环境的事情所以Webpack设置了冲突报错。

HTML文件的发布

这里需要一个html-webpack-plugin

npm install --save-dev html-webpack-plugin 进行安装插件

webpack.config.js

const htmlPlugin= `require`('html-webpack-plugin');  // 先引入


// 然后在plugin中写入

 new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
        })

• minify：是对html文件进行压缩，removeAttrubuteQuotes是去掉属性的双引号。
• hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
• template：是要打包的html模版路径和文件名称。

html文件的打包可以有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。

---

CSS中的图片处理

项目中图片一般放置在static 或者assert 文件夹下

这里我们需要安装插件

npm install --save-dev file-loader url-loader

file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy

file-loader: 是让相对路径在打包后仍然可以找到相对应的文件

url-loader: http请求图片转换成请求文件，并可对图片大小的请求方式进行限制 limit

 module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

• test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
• use：是指定使用的loader和loader的配置参数。
• limit：是把小于500000B的文件打成Base64的格式，写入JS。

简单地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：

1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；

2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，我们这里就顺便安装上file-loader。

处理HTML中的图片

在webpack中是不喜欢你使用标签来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。因为是国人开发的，文档都是中文，所以学习起来还是比较简单的

npm install html-withimg-loader --save

modules = {
    rules = [
        {
            test: /\.(htm|html)$/i,
             use:[ 'html-withimg-loader'] 
        }
    ]
}

在终端中可以进行打包了。你会发现images被很好的打包了

如何把图片放到指定的文件夹下

打包后的图片并没有放到images文件夹下，要放到images文件夹下，其实只需要配置我们的url-loader选项就可以了。 项目中打包后一般存在public文件夹下

module:{
        rules: [
           {
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:5000,
                       outputPath:'images/',
                   }
               }]
            }
          ]
    },
    
    
    
    这回你再执行打包就可以把图片打包到images文件夹里了

CSS分离与图片路径处理

CSS分离:extract-text-webpack-plugin

这个插件就可以完美的解决我们提取CSS的需求，但是webpack官方其实并不建议这样作，他们认为CSS就应该打包到JavasScript当中以减少http的请求数。但现实中的需求往往不是我们前端能控制的，有些需求是我们不能控制的，分离CSS就是这样一个既合理又不合理的需求。

npm install --save-dev extract-text-webpack-plugin

const extractTextPlugin = `require`("extract-text-webpack-plugin");

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },
    
    
    
    
    
 plugins: [
    new ExtractTextPlugin("./index.css"),
  ]
  
  
  
  
  //  less 和 sass 的处理
  
 
// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来。图片路径展示不正确，很多小伙伴就在这里搞个几天还是没有头绪，网上也给出了很多的解决方案，我觉的最好的解决方案是使用publicPath解决，我也一直在用。

publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。

在处理前，我们在webpack.config.js 上方声明一个对象，叫website。

let website ={
    publicPath:"http://192.168.1.1:5555/"
}

注意，这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。


    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js',
        publicPath:website.publicPath
    },
    
    
    配置完成后，你再使用webpack命令进行打包，你会发现原来的相对路径改为了绝对路径，这样来讲速度更快。

项目中的publicPath

Less文件的打包和分离

npm install --save-dev less less-loader

modules = {
    rules: [
        {
            test: /\.less$/,
            use: [{
                   loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                , {
                    loader: "less-loader" // compiles Less to CSS
                }]
        }
        
    ]
}

编写一个less文件

@base :#000;
#gogo{
    width:300px;
    height:300px;
    background-color:@base;
}

这里#gogo是层的ID名称。@base是我们设置的变量名称。

然后在某个文件夹下引入 

import less from './css/black.less';


打包后  转换成浏览器能够识别的css

Lees文件分离。

modules = {
    rules: [
        {
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }
    ]
}


配置好后，你会发现less被分离到了index.css文件里。

SASS文件的打包和分离

npm install --save-dev node-sass sass-loader

在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。

modules = {
    rules: [
        {
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }
    ]
}

编写一个sass

$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}

SASS文件分离。

    modules = {
        rules: [
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
        
        ]
    }

自动处理CSS3属性前缀 postcss-loader 和autoprefixer

PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能，但是今天我们就通过其中的一个加前缀的功能，初步了解一下PostCSS。

npm install --save-dev postcss-loader autoprefixer

postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。

postCss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

webpack.config.js

modules = {
    rules: [
        {
            test: /\.css$/,
            use: extractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader'
                ]
            })
        }
    ]
}



或者  

modules = {
    rules: [
        {
          test: /\.css$/,
          use: [
                {
                  loader: "style-loader"
                }, {
                  loader: "css-loader",
                  options: {
                     modules: true
                  }
                }, {
                  loader: "postcss-loader"
                }
          ]
        }
    ]
}

消除未使用的CSS PurifyCSS-webpack

npm i -D purifycss-webpack purify-css

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。

在webpack.config.js文件头部引入glob。

const glob = `require`('glob');

const PurifyCSSPlugin = `require`("purifycss-webpack");




plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
             // Give paths to parse for rules. These should be absolute!
             paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
]


这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。



使用这个插件必须配合extract-text-webpack-plugin这个插件


配置好上边的代码，我们可以故意在css文件里写一些用不到的属性，然后用webpack打包，你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用。

给webpack增加babel支持

在前端开发中都开始使用ES6的语法了，虽然说webpack3增加了一些ES6的转换支持，但是实际效果不是很好，也可能是本人技术有限，没发挥出真正的功能。所以我在开发中还是喜欢添加Babel-loader的，我也查看了一些别人的webpack配置也都增加了babel-loader，

Babel是什么？ Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过便宜帮你达到以下目的：

使用下一代的javaScript代码(ES6,ES7….)，即使这些标准目前并未被当前的浏览器完全支持。

使用基于JavaScript进行了扩展的语言，比如React的JSX。

cnpm c install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

modules = {
    rules: [
        {
            test:/\.(jsx|js)$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        "es2015","react"
                    ]
                }
            },
            exclude:/node_modules/
        }
    ]
}

es2015 -> 完全了以用env

打包后  let 自动回转换成var

虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。

.babelrc

{
    "presets":["react","es2015"]
}

es2015 -> env

现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,

npm n install --save-dev babel-preset-env 安装该插件

打包后调试 source-map

使用了webpack后，所以代码都打包到了一起，给调试带来了麻烦，但是webpack已经为我们充分考虑好了这点，它支持生产Source Maps来方便我们的调试。

在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。

在配置devtool时，webpack给我们提供了四种选项。

• source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
• cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
• eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
• cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

开发和生产并行设置

一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的。

• 开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。

• 生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包在dependencies中。

我们在以前的配置中设置了一个变量website，用于静态资源正确找到路径。那如果生产环境和开发环境不一样，而且我们需要来回切换，这时候我们需要更好的设置方法。

    let website = {
        publicPath = 'http://127.1.1.1:5555'
    }
    

其实就是添加一个dev设置，并通过环境变量来进行区分，下面是package.json里的值。

package.json

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webapck",
    "build": "set type=build&webpack"
  },

可以利用node的语法来读取type的值，然后根据type的值用if–else判断。实际上这种方法在项目中不经常用

webpack.config.js

if(process.env.type== "build"){
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}else{
    var website={
        publicPath:"http://cdn.jspang.com/"
    }
}


查看  console.log( encodeURIComponent(process.env.type) );


mac下的配置

package.json

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"export type=dev&&webpack",
    "build": "export type=build&&webpack"
  },

webpack模块化配置

现在的前端开发随着ES6的普及已经大面积使用模块化进行开发了，那在webpack.config.js配置文件中，如何进行模块化开发那？例如把开发环境的写到一个模块中，把生产环境的写到一个模块中

优雅打包第三方类库

用plugin引入

如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负责了一下打包，这样并没有全局感。那再学习一种在webapck.config.js中配置的方法，这种不需要你在入口文件中引入，而是webpack给你作了全局引入。这个插件就是ProvidePlugin。

ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。

npm install jquery --save

plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
],

watch的正确使用方法

初级开发阶段，使用webpack-dev-server就可以充当服务器和完成打包任务，但时随着你项目的进一步完成，可能需要前后台联调或者两个前端合并代码时，就需要一个公共的服务器了。这时候我们每次保存后手动打包显然效率太低，我们希望的场景是代码发生变化后，只要保存，webpack自动为我们进行打包。这个工具就是watch

watch的配置

很多小伙伴认为–warch直接使用就可以，并没有什么需要讲的。其实这只是初级的用法，但是在学习一种技术时，我们必须要做到了解全部，也就是常说的知其然知其所以然。我们看下面的配置代码，我在代码中已经做出了解释。

webpack.config.json

modules = {
    
},
devServer : {
    
},
watchOptions:{
    //检测修改的时间，以毫秒为单位
    poll:1000, 
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregateTimeout:500, 
    //不监听的目录
    ignored:/node_modules/, 
}

BannerPlugin插件 版权所有

plugins: [
    new webpack.BannerPlugin('JSPang版权所有，看官方免费视频到jspang.com收看')
]

多个第三方类库抽离

这里抽离Vue，jquery

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    //name对应入口文件中的名字，我们起的是jQuery
    name:['jquery','vue'],
    //把文件打包到哪里，是一个路径
    filename:"assets/js/[name].js",
    //最小打包的文件模块数，这里直接写2就好
    minChunks:2
}),
]

需要修改两个位置：

第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组；
第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。

静态资源集中输出 copy-webpack-plugin

使用copy-webpack-plugin copy-webpack-plugin就是专门为我们作静态资源转移的插件，不过它不同上两节使用的插件，它是需要安装的。

cnpm c install --save-dev copy-webpack-plugin

const copyWebpackPlugin= require("copy-webpack-plugin");

plugins: [

    new copyWebpackPlugin([{
        from:__dirname+'/src/public',
        to:'./public'

]

from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。
to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。

Json配置文件使用

在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。有时候你也会从后台读取到一个json的文件，

config.json

{
    name: 'xiaoyan'
}

现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。

到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，如下：

var json =require('../config.json');
document.getElementById("json").innerHTML= json.name;

说说热更新

其实在webpack3中启用热加载相当的容易，只要加入HotModuleReplacementPlugin这个插件就可以了。

plugins: [

    new webpack.HotModuleReplacementPlugin()
]