一篇文章带你入门webpack4

webpack是什么

webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。
从 webpack 4.0.0 版本开始，可以不用通过引入一个配置文件打包项目。然而，webpack 仍然还是 高度可配置的，并且能够很好的满足需求。

核心

• 入口（entry）
  模块的入口起点。
• 输出（output）
  打包输出的路径，默认./dist/main.js
• loader
  对模块源码进行转换。
• 插件（plugin）
  处理loader无法处理的事情

webpack4与webpack3区别

• webpack4添加了mode属性development,production,none，默认production,webpack对应不同的环境进行了相应的内置优化。

公用配置

由于一些不同环境下的配置是可以相同的，所以将相同的配置拿到一个文件中进行集中配置。
在进行webpack配置的时候需要对于不同的环境进行相应的配置，在开发环境和生产环境所需要的配置是不同的，所以可以将通用的配置写在通用配置文件中其他的配置分别写在相应的配置文件中，接下来将通过这种分别进行介绍：
###相同的配置base.config.js

entry入口

entry: {
    app: './src/js/main.js'
}

output出口

由于在开发环境中不需要使用hash值作为文件名，所以需要进行相应的配置或者是使用下面这种方法进行配置

output: {
        path: path.resolve(__dirname, '../dist/'),
        filename: process.env.NODE_ENV === 'production' ? 'static/js/[name].[chunkhash].js' : 'static/js/[name].js',
        chunkFilename: process.env.NODE_ENV === 'production' ? 'static/js/[name].[chunkhash].js' : 'static/js/[name].js',
        publicPath: '../../'
    }

loader

####处理css的loader
对于css的处理在不同的环境中会不同，因为在开发环境中不需要将页面中的css进行抽离成单独的css文件。
在webpack4之前可以使用extract-text-webpack-plugin进行处理，在webpack4中推荐使用mini-css-extract-plugin.

//开发环境
   {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
   }
//生产环境
 {
       test: /\.css$/,
       use: [
            {
                loader: MiniCssExtractPlugin.loader,
              },
               'css-loader'
       ]
 }
 //分离css
        new MiniCssExtractPlugin({
            filname: 'static/css/[name].[contenthash].css',
            chunkFilename: 'static/css/[name].[contenthash].css'
        }),

处理js

使用babel-loader将新版本的js转换成浏览器支持的低版本的,使用该loader需要在.babelrc进行相应的配置。

            {
                test: /\.js$/,
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                ),
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },

处理图片、字体等

使用url-loader进行相应的处理

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: process.env.NODE_ENV === 'production'
                        ? 'static/img/[name].[hash].[ext]' : 'static/img/[name].[ext]'
                }
            },
            {
                test: /\.(woff2|woff|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: process.env.NODE_ENV === 'production' ?
                        'static/fonts/[name].[hash].[ext]' : 'static/fonts/[name].[ext]'
                }
            }

plugin的使用

• plugin可以处理一些loader处理不了的东西。
• 基本需要用到HtmlWebpackPlugin但是需要在不同的环境中进行不同的配置。

//开发环境
        new HtmlWebpackPlugin({
            filename: 'index.html',//
            template: path.resolve(__dirname, '../src/index.html'),
            inject: true,
            favicon: resolve('src/favicon.ico'),
            path: '/static'
        })
//生产环境
        new HtmlWebpackPlugin({
            filname: 'index.html',//文件写入路径
            template: path.resolve(__dirname, '../src/index.html'),//文件模板路径
            inject: true,//插入位置
            favicon: path.resolve(__dirname, '../src/favicon.ico')
        }),

以上就是基本的配置，接下来将分别从开发环境和生产环境进行相应的详细说明。
###开发环境
需要设置devServer来设置

    devServer: {
        clientLogLevel: 'warning',//控制台显示信息从哪个层级
        contentBase: false,
        host: '0.0.0.0',
        hot: true,//是否进行热加载
        open: false,//是否主动打开浏览器
        noInfo: true,
        overlay: true,
        port: '9999',
        proxy: {},
        progress: true,
        publicPath: '/'
    },

生产环境

在进行打包时需要使用rimraf模块进行自动删除打包好的文件，然后使用webpack进行打包。

//使用webpack运行打包的配置文件。
    webpack(webpackProConfig, (err, stats) => {
      //
    })

总结

• 这些配置只是最基本的配置，还需要后续的优化提高打包效率。
• 在开发环境和生产环境中对于一些配置是不相同的，在开发环境中是尽量让问题暴露出来的更精确，在生产环境是尽量减少代码的大小。