webpack常用配置及解析

webpack

核心概念

entry:告诉wabpack要以哪个文件为起点打包

output:告诉wabpack打包后的资源 (bundles) 叫什么要输出到哪里去

loader: 让webpack能够处理非javascript文件

plugins:webpack插件：打包、优化、定义环境变量等等

mode:开发环境（development）和生产环境（production）

命令

npm i webpack webpack-cli -g     //全局安装
npm i webpack webpack-cli -D     //开发依赖

目录结构

src					---项目源代码目录
	index.js    	    ---入口文件
build          	 	---打包后输出的目录
webpack.config.js	---webpack的配置文件
					

运行指令

开发环境
webpack ./src/index.js -o ./build/built.js --mode=development
	webpack会以 ./src/index.js为入口文件开始打包，打包后输出到./build/built.js，整体的打包环境是开发环境
生产环境
webpack ./src/index.js -o ./build/built.js --mode=production

webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口起点
    entry: './src/index.js',
    output: {
        //输出的文件名
        filename: 'built.js',
        //输出的路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        //详细的loader配置
        rules: [
            {
                //匹配哪些文件
                test: /\.css$/,
                // use中的loader执行顺序：从右到左，从后到前依次执行
                use: [
                    //创建一个style标签，将js中的样式资源插入进去，然后添加到header中
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    //创建一个style标签，将js中的样式资源插入进去，然后添加到header中
                    'style-loader',
                    //将css文件编译成commonjs模块加载到js中，里面是样式字符串
                    'css-loader',
                    //将less文件编译成css文件  //下载两个包,less-loader less
                    'less-loader'
                ]
            },
            {
                //处理图片资源
                test: /\.(jpg|png|gif|webp)$/,
                loader: 'url-loader',
                options: {
                    //图片小于8kb就会被base64处理
                    //优点：减少请求数量
                    //缺点：图片体积会更大
                    limit: 8 * 1024,
                    //问题:因为url-loader默认使用es6模块化解析，而html-loader引入图片是用的commonjs
                    //解析的时候会发生问题
                    //解决:关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    //给图片进行重命名: hash:10取hash前10位，ext文件原来的扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                //处理html中的图片资源
                test: /\.html$/,
                loader: 'html-loader',
                options:{
                    esModule:false
                }
            },{
                //处理其他资源
                exclude:/\.(css|js|html)$/,
                loader:'fail-loader'
            }
        ]
    },
    //详细的plugins
    plugins: [
        new HtmlWebpackPlugin({
            //复制./src/index.html文件并自动引入输出的所有资源
            template: './src/index.html'
        })
    ],
    //模式
    mode: 'development',
    // mode:'production'
}