webpack看这一篇就够了，webpack4.0配置详解。

1. 什么是webpack，webpack给我们解决了哪些实际问题？

   • 什么是webpack?
     webpack 它是基于 Node.js 开发出来的是前端的一个项目构建工具。

   • webpack给我们解决了哪些实际的问题？
     你是否和我一样整天被这种包与包之间的依赖关系搞得头皮发麻。比如你需要用到easyUI那么你就得引入jQuery,并且jQuery必须在easyUI引入之前引入。那这个就有点烦了,每个页面都必须引入。
     引入过多的静态资源后，网页打开需要的二次请求量也就高了，这样网页打开就会比较慢，那么项目经理找你的次数也会增加，加班次数增加，啊啊啊啊！
     这时候webpack就来了，可以很好的解决以上的问题，从此再也不用加班了。

   tips:除了webpack这个打包工具外还有Gulp也比较常见。

   • webpack完美实现资源的合并、打包、压缩、混淆等诸多功能。
     • 从此写代码无烦恼，天天吃饭吃的好。

     webpack官网

webpack的安装

1. npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack -D安装到项目开发依赖中

webpack的配置文件

• 其实webpack也可以不需要配置文件，然后就靠输命令来构建。(如果你喜欢你可以在项目上试试,公司第二天辞退QAQ)
• 使用webpack的配置文件。

1. 首先创建webpack的配置文件，在项目根目录创建webpack.config.js。
2. 配置webpack,你得先清楚这两个概念:'出口(output)'和'入口(entry)'。
   • 入口就相当于工厂中的原材料，出口就是做成的产品（够形象了吧）。
   • 入口简单讲就是你自己写的代码，出口呢就是webpack帮你处理过后的代码（你：’我为什么要给他处理，我自己不知道我写的啥吗？‘。先别抬杠，别着急慢慢看）。
     webpack.config.js简单的配置文件如下：

    // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认查找`webpack.config.js`，并读取这个文件中配置，来进行打包
    module.exports = {
        // 入口文件
        entry: path.resolve(__dirname, './src/main.js'), 
        // 出口文件
        output: { 
            // 出口的路径
            path: path.resolve(__dirname, 'dist'), 
            // 出口的文件名
            filename: 'bundle.js' 
        }
    }

这样你在项目根目录执行webpack命令就会帮你把main.js给打包成bundle.js然后你以后只需要引入bundle.js就行了,是不是很神奇。

• 把main.js打包的意义：
  1. 我们可以使用ES6提供的模块化进行代码的编写了。（配置babel之后）
  2. 我们可以直接在js文件上引入样式了。
  3. 代码美观冗余的代码很少很少了。

大体了解了吧

• 我们这样配置后有个问题，我们每次修改代码都必须重新打包，一个字：麻烦。
• 使用webpack-dev-server来实现代码的实时打包。
  • 首先npm i webpack-dev-server -D安装一下webpack-dev-server
  • 直接输webpack-dev-server会报错，这里我们得借助package.json来进行打包，在scripts下增加"dev": "webpack-dev-server"指令，然后npm run dev,就能实时打包了。
  • 使用webpack-dev-server的打包是不会产生出口文件的，他是将出口文件放在内存里，这样来做到实时读取和实时打包的。
  • 默认启动端口是8080我们可以webpack-dev-server --port 3000来指定端口
  • 默认启动是在项目根目录，我们可以webpack-dev-server --port 3000 --contentBase src让其在./src中启动
  • 可以配置热更新，就不用每次刷新了，webpack-dev-server --port 3000 --contentBase src --hot
  • 每次都得手动开启浏览器，不喜欢，我们可以让其构建时自动打开浏览器webpack-dev-server --port 3000 --contentBase src --hot --open
  • html文件没进内存-_-!,我们可以配置插件html-webpack-plugin插件

   // 导入处理路径的模块
   var path = require('path');
  
   //自动生成html文件
   var htmlWebpackPlugin = require('html-webpack-plugin');
  
   // 导出一个配置对象，将来webpack在启动的时候，会默认查找`webpack.config.js`，并读取这个文件中配置，来进行打包
   module.exports = {
       // 入口文件
       entry: path.resolve(__dirname, './src/main.js'), 
       // 出口文件
       output: { 
           // 出口的路径
           path: path.resolve(__dirname, 'dist'), 
           // 出口的文件名
           filename: 'bundle.js' 
       },
       plugins:[
           new htmlWebpackPlugin({
               //模板路径
               template:path.resolve(__dirname, 'src/index.html'),
               //生成的HTML文件的名称
               filename:'index.html'
           })
       ]
   }
  

    + 这里就不需要再配置`--contentBase src`了，`html-webpack-plugin`插件会自动把bundle.js注入到index.html页面中！（好玩吧）
    + 最终在packjson的`script`中增加这个：` "dev":"webpack-dev-server --port 3000 --hot --open" `
    + 除了加命令参数外，我们还可以在配置文件中进行配置增加
        1. 第一步在配置项中增加
```javascript
devServer:{
    port:3000
    hot:true,
    open:true
}

    2. 在头部加载`webpack`模块：

var webpack = require('webpack');

    3. 在`plugins`下新增插件（热部署）：

new webpack.HotModuleReplacementPlugin()

使用webpack来打包css文件

+ 是的，css也能打包，包括`less,sacc`都行的只是`loader`不一样
    1. 安装需要的`loader`，运行`npm i style-loader css-loader -D` 
    2. 修改配置文件增加`module`项配置

// 配置第三方loader模块
module: { 
        rules: [ 
            { 
                // 正则匹配所有的.css文件
                test: /\.css$/, 
                //处理css文件的loader
                use: ['style-loader', 'css-loader'] 
            }
        ]
    }

注意：use表示使用哪些loader来处理test所匹配到的文件；use
中相关loader模块的调用顺序是从后向前调用的；（自己第一次的时候就入坑了）

使用webpack打包less文件

1. 下载需要的loadernpm i less-loader less -D
2. 修改配置文件：

module: { 
        rules: [ 
            { 
                // 正则匹配所有的.css文件
                test: /\.css$/, 
                //处理css文件的loader
                use: ['style-loader', 'css-loader'] 
            },
            { 
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'] 
            }
        ]
    }

使用webpack打包sass文件

1. 下载需要的loadernpm i sass-loader node-sass -D
2. 修改配置文件：

    //在module下的rules增加如下代码
    { 
        test: /\.scss$/, 
        use: ['style-loader', 'css-loader', 'sass-loader'] 
    }

使用webpack处理css中的路径（图片等一系列）

1. 下载需要的loadernpm i url-loader file-loader -D
2. 修改配置文件：

//在module下的rules增加如下代码
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 默认会将图片转换成base64,可以通过limit设置进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

//在module下的rules增加如下代码
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel处理高级JS语法

1. 安装需要的loadernpm i babel-core babel-loader babel-plugin-transform-runtime -D
2. 安装转换规则npm i babel-preset-env babel-preset-stage-0 -D
3. 修改配置文件添加相关loader模块，一定要把node_modules文件夹添加到排除：

//在module下的rules增加如下代码
{ 
    test: /\.js$/, 
    use: 'babel-loader', 
    //排除node_modules
    exclude: /node_modules/ 
}

4. 在项目根目录中添加babel的配置文件.babelrc文件，并修改这个配置文件如下：

{
    //使用何种转换语法
    "presets":["env", "stage-0"],
    //插件配置
    "plugins":["transform-runtime"]
}

注意：这里使用最新的转换语法babel-preset-env，你看网上很多都用babel-preset-es2015，建议你使用env,它包含了所有的ES相关的语法；

好了webpack的基本配置都说的差不多，不用去记，很多脚手架就能直接给你配好，比如vue-cil，不过如果怕忘欢迎收藏。