webpack详细配置（一）

webpack配置（一）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    mode: 'development',//开发环境，打包出来的文件不会压缩
    // 配置了source-map可以在开发环境下帮你将打包后的文件映射到代码错的地方，定位在原文件而不是打包之后的文件
    //  inline 可以将映射的文件插入到打包过后的js内部，精确到哪一行的那一列比较耗费性能，
    // +cheap可以把映射的错误代码精确到行，不精确到列，提高性能
    // 如果需要cheap管loader或其他第三方文件的错误代码映射的话，需要加上module
    // evel 是打包速度最快性能最好的一种方式
    // development 环境下推荐 devtool: 'cheap-module-evel-source-map',
    // production 环境下推荐 devtool: 'cheap-module-source-map',
    devtool: 'cheap-module-evel-source-map', //development环境下推荐
    entry: './src/index.js', // 入口文件
    devServer: { //启动服务监听8080端口，运行命令的时候自动打开浏览器
        contentBase: './dist',
        open: true,
        port: '8080',
        hot: true, //配置HMR,每次css更新的时候不会完全刷新页面，需要配置HotModuleReplacementPlugin插件
        hotOnly: true
    },
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
            	loader: 'url-loader'，
            	//loader: 'file-loader'，// file-loader默认不会打包成base64格式图片
            	options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240 //如果不配置这个参数的话使用url-loader的话会打包成base64格式的图片，大图片不适合这样做，所以限定小于10KB的图片才打包成base64格式
                }
            } // 如果是jpg结尾的文件名，那么需要用file-loader去打包，
        }，
       {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']  //处理css文件，style-loader可以把样式挂载到HTML页面header上，所以处理css文件'style-loader', 'css-loader'配合使用
      	},
       {
                test: /\.(svg|eot|ttf|woff)$/,
                use: {
                    loader: 'file-loader' //使用file-loader去打包字体文件
                }
       },
       {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2 //不管是哪里引入css文件都会走下面两个loader的处理
                            modules: true // css模块化，如果不配置将会作用于全局样式
                        }
                    },
                    'sass-loader' // 处理scss文件，必须要写在最后，因为loader的处理的从下到上，从右到左
                    'postcss-loader' //配置css3属性浏览器厂商的前缀信息，需要配置响应的参数。具体可以看官网
                ]
        },
        {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader", //处理es6的语法，兼容低版本浏览器，@babel/preset-env，@babel/core，babel-loader需要一起安装
                options: {
                    //使用了polyfill处理低版本浏览器兼容性问题打出来的包会非常大，所以配置这个参数会使用到es6+进行打包，不会全部打包，减小体积
                    presets: [["@babel/preset-env", {
                        useBuiltIns: 'usage'
                    }]]
                    //这种方案适合打包一个库，因为polyfill打包出来的代码都是以全局变量的形式，可能会污染其他变量。这种方式是采用闭包的形式，适合打包类库@babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs2一起使用，两种方式都可以放入到.babelre的文件里
                   /*"plugins": [["@babel/plugin-transform-runtime", {
                        "corejs": 2,
                        "helpers": true,
                        "regenerator": true,
                        "useESModules": false,
                    }]]*/
                }
            },
       ]
    },
    plugins: [
    	new HtmlWebpackPlugin({ HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包的生成js自动引入到这个html文件中
       	 template: 'src/index.html' //打包生成的HTML以src/index.html为模板
   		 }),
   		 new CleanWebpackPlugin() //每次打包之前清除dist文件夹，注意导入的时候需要解构，不然会报错！！！
   		 new webpack.HotModuleReplacementPlugin()
    ],
    output: {
   		publicPath: 'http://cdn.com.cn', // 配置html引入文件的前缀，类似baseURL
        filename: 'bundle.js', //打包出来的文件夹名字
        path: path.resolve(__dirname, 'dist') // 打包所在的文件目录
    }
}