webpack4.0配置详解。

webpack4.0配置详解。

一，什么是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文件**

```javascript
+ 是的，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，不过如果怕忘欢迎收藏。