webpack配置

页面也放入到内存中

html-webpack-plugin插件作用：
    1.自动在内存中根据指定页面生成一个内存中的页面
    2.自动把打包好的bundle.js追加到页面中去
1.安装插件
    cnpm i html-webpack-plugin -D
2.webpack.config.js
    导入包
    const htmlWebpackPlugin = require('html-webpack-plugin');    
    在plugins中添加
    new htmlWebpackPlugin({
        template: path.join(__dirname, './src/index.html'),
        filename: 'index.html'//指定生成的页面的名称
    })    
当使用了该插件之后，不需要手动处理bundle.js文件，因为这个插件已经帮我们自动创建了一个合适的script标签，引入该文件

css文件的处理

需要安装loader
    cnpm i style-loader css-loader -D
在webpack.config.js文件，里面新增一个配置节点，添加配置
    module: {//用于配置所有的第三方模块加载器
        rules: [//这里是匹配规则
            {
                test: /\.css$/,
                //配置处理css文件的第三方loader规则
                use: ['style-loader', 'css-loader'],
            }
        ]
    }
注意 处理过程如下：
    如果发现不是js文件，然后就在配置文件中查找是否有第三方loader规则
    如果能找到对应的规则，就会调用对应的loader处理这种文件类型
    在调用loader的时候，从后往前调用
    当最后一个loader调用完毕，会把处理的结果，拿到对应的配置对象，指定的入口和出口        

处理less文件

安装：

 cnpm i less-loader -D
  cnpm - less -D        

配置：
{
    test: /\.less$/,
    //这是配置处理less文件的规则
    use: ['style-loader', 'css-loader', 'less-loader'],
},

处理scss配置

安装：

  cnpm i sass-loader -D
  cnpm i node-sass -D

配置：
{
    test: /\.scss$/,
    //这是配置处理scss文件的规则
    use: ['style-loader', 'css-loader', 'sass-loader'],
}

处理图片

安装

  cnpm i url-loader -D
  cnpm i file-loader -D

配置：
{
    //处理图片路径的loader
    test: /\.(jpg|png|gif|bmp|jpeg)$/,
    use: 'url-loader'
}
     处理字体
{
    //处理字体文件的loader
    test: /\.(ttf|eot|svg|woff|woff2)$/,
    use: 'url-loader'
}       

处理类相关的代码

// webpack中只能处理一部分ECS6相关的语法，需要借助第三方的loader来帮助处理
// 通过Babel可以帮我们将高级的语法转换为低级的语法
// 可以安装如下命令
// 第一套是转换工具
// 第二套是语法插件
// 第一套： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 第二套：cnpm i babel-preset-env babel-preset-stage-0
## 安装第一个包出现报警告 babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 原因如下：
#  babel-loader@8.x is the Webpack integration used for Babel 7.x. Babel 7.x has moved all packages from a babel-prefix to the @babel npm scope.
#  解决办法就是 将babel-loader@8.x降级为babel-loader@7.x
#  npm uninstall babel-loader -D
#  npm i babel-loader@7 -D
#  或者一开始就直接为babel-loader指定到@7版本
#  npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
// 打开配置文件，在module节点中，配置相关的规则，规则如下
//  {test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/'}
// 排除的原因：如果不排除，会将node_modules下的所有的js文件都打包编译，消耗CPU，速度慢；哪怕都转换完毕了，项目也无法正常运行
// 项目根目录创建 .babelrc的配置文件，这个是json格式的，必须符合json语法规范 
// 配置内容如下
// {
//   "presets": ["env", "stage-0"],
//   "plugins": ["transform-runtime"]
// }
// webpack.config.js添加配置如下：
// {
//     test: /\.js$/,
//     use: 'babel-loader',
//     exclude: /node_modules/ //配置babel来转换高级ES6语法
// }

以上是针对webpack相关文件处理的配置的知识点的总结与介绍。