webpack总结2--配置文件打包类型

注1：全文中安装插件写为了cnpm，个人比较推荐yarn进行安装，cnpm与yarn的区别，可查看之前转载的博客npm与yarn的区别

注2：注意webpack的版本间的兼容性；

webpack打包css文件

1. 运行cnpm i style-loader css-loader --save-dev
2. 添加到webpack.config.js配置文件：

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

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

webpack打包less文件

1. 运行cnpm i less-loader less -D
2. 修改webpack.config.js这个配置文件：

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

webpack打包sass文件

1. 运行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中添加处理sass文件的loader模块：

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

webpack处理图片路径

1. cnpm i url-loader file-loader --save-dev
2. 在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

webpack处理字体文件

1. 在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }

babel处理高级JS语法

1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包

说明：
babel-core：允许我们去调用babel的api，可以将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理.

babel-loader：在import或加载模块时，对es6代码进行预处理，es6语法转化为es5语法。

babel-loader：在import或加载模块时，对es6代码进行预处理，es6语法转化为es5语法。

babel-polyfill：它效仿一个完整的ES2015+环境，使得我们能够使用新的内置对象比如 Promise，静态方法比如Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数（提供给你使用 regenerator 插件）。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。

babel-runtime babel-plugin-transform-runtime：与babel-polyfill作用一样，使用场景不一样。

2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
3. 在webpack.config.js中添加相关loader模块：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

注意，一定要把node_modules文件夹添加到排除项：在项目根目录中新建 .gitignore文件并添加：

node_modules
.idea
.vscode
.git

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

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

webpack.config.js模板

//这个配置文件，其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
const path = require('path');

//导入再内存中生成HTML 页面的插件
//只要是插件，都一定要放到plugins节点中去
// htmlWebpackPlugin 插件的两个作用：
//  1.自动在内存中根据指定页面生成一个内存的页面
//  2.自动把打包好的 bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html' //指定生成的页面的名称
        })
    ],
    module: { //节点，用于配置所有第三方模块加载器
        rules: [ //所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理 .css文件的第三方loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less文件的第三方loader规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, //配置处理图片路径的第三方loader规则
            //limit 给定的值，是图片的大小， 单位是字节byte， 如果引用的图片，大于或者等于给定的limit值，则不会转为base64格式的字符串
            //如小于，则会被转为base64格式的字符串
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, //处理字体文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置babel 来转换高级的js 语法
            { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
        ]

    }
};

扩展

附上两个学习链接：

babel-preset-env：你需要的唯一Babel插件

Runtime transform 运行时编译es6