Webpack基础

核心

Entry:入口

//多页应用分离 库与代码分离
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

Output:输出

{
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

Loder:模块的源代码进行转换

  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
}

Plugins:插件

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

Mode:模式

production//生产模式
development//开发模式
//通过 process.env.NODE_ENV 判断

基本的开发环境

//webpack.config.js
//绝对路径
const { resolve } = require('path');
//css分离
const MiniCssextractPlugin = require('mini-css-extract-plugin');
//html
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DEVenv = process.env.NODE_ENV === 'development';
//压缩css
const optimizecsswebpackplugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './src',
        hot:true
    },
    module: {
        rules: [
            {
                test: /\.s?[c]ss$/i,
                use: [
                    //创建style 将样式放入
                    DEVenv ? 'style-loader' : MiniCssextractPlugin.loader,
                    //将css 整合到js
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                // "eslintConfig":{
                //     "extends":"airbnb-base"
                //   }
                //eslint-config-airbnb-base eslint eslint-plugin-import.
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true
                }

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'dev',
            template: './src/index.html',
            minify: {
                //折叠
                collapseWhitespace: true,
                //移除注释
                removeComments: true
            }
        }),
        new MiniCssextractPlugin({
            filename: 'css/style.css'
        }),
        new optimizecsswebpackplugin()
    ],
}