webpack配置

## webpack 安装

- 安装本地的webpack 

- webpack webpack-cli -D   开发模式下使用，不需要上线使用

- yarn add webpack webpack-cli -D

## webpack 可以进行零配置

- 打包工具  -> 打包工具  输出后的结果 (js模块);

- 打包 （支持我们的js的模块化）;

## 手动配置webpack

- 默认配置文件的名字 webpack.config.js 

- webpack具有优化的功能

- var __webpack_module_cache__ = {};  缓存

- __webpack_require__   实现了require方法

- webpack通过 微入口  实现递归的依赖关系

-  npx  webpack --config  webpack.config.my.js

"build":"wepack --config webpack.config.js"

或者 npm run build -- --config webpack.config.js

-- 启动开发的服务  webpack-dev-server -D

yarn add html-webpack-plugin -D

插件的用法都一样，webpack本身就是用各种插件堆叠起来的。

less-loader 会调用less进行转化

sass  stylus  node-sass  sass-loader stylus-loader

## 抽离css

mini-css-extract-plugin -D  抽离css的样式

yarn add postcss-loader autoprefixer -D  添加前缀

## css 优化压缩

let OptimizeCss=require('optimize-css-assets-webpack-plugin');   //CSS优化

let UglifyJsPlugin=require('uglify-webpack-plugin');

## 插件都是类，使用的时候需要new一个对应的类

## babel的转化

yarn add babel-loader  @babel/core   @babel/preset-env  转化模块 

1、类属性的转化：

yarn add @babel/plugin-proposal-class-properties -D

2、装饰器的转化：

yarn add @babel/plugin-proposal-decorators -D

3、运行时转化依赖

yarn add @babel/plugin-transform-runtime -D

4、补丁模块

yarn add @babel/polyfill   需要引入代码里  不能添加-D

5、eslint校验

yarn eslint eslint-loader  

expose-loader 暴露到window上

providePlugin  给每个人提供一个$

引入不打包

2、webpack.config.js

// webpack 是node写出来的 node的写法
let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let MiniCssExtractPlugin=require('mini-css-extract-plugin');
let OptimizeCss=require('optimize-css-assets-webpack-plugin');   //CSS优化
let UglifyJsPlugin=require('uglify-webpack-plugin'); 
let webpack=require('webpack');
module.exports={
    devServer:{  //开发服务器的配置
        port:3000,
        progress:true,
        contentBase:'./build',
        compress:true
    },
    optimization:{
        minimizer:[
            new UglifyJsPlugin({
                cache:true,
                parallel:true,
                sourceMap:true
            }),
            new OptimizeCss()
        ]
    },
    mode:'development',    //模式、默认两种 production   development 
    entry:'./src/index.js',   //入口
    output:{
        filename:'bundle.[hash:8].js',  //打包后的文件名   名称添加hash  只显示8位
        path:path.resolve(__dirname,'build'),  //路径有个要求
    },
    plugins:[  //放着所有webpack的插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{   //压缩
                removeAttributeQuotes:true,
                collapseWhitespace:true,
            },
            hash:true   //添加hash措
        }),
        new MiniCssExtractPlugin({
            filename:'main.css'
        }),
        new webpack.ProvidePlugin({   //在每个模块中都注入$
            $:'jquery'
        })
    ],
    externals:{
        jquery:'$'
    },
    module:{ //模块
        rules:[ //规则  css-loader  @import 这种语法
            // style-loader 把css插入到head的标签中
            // loader 的特点是单一 loader的用法  ：多个loader需要一个数组  loader的顺序默认是从右向左执行 从下向上执行
            // loader 也可以写成对象方式
            // 可以出出来less文件
            {
                test:/\.js$/,
                use:{
                    loader:'eslint-loader'
                },
                options:{
                    enforce:"pre",
                },
                exclude:/node_modules/
            },
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{  //用babel-loader  需要把es6转化成es5
                        presets:[
                            '@babel/preset-env'
                        ],
                        plugins:[
                            ['@babel/plugin-proposal-class-decorators',{"legacy":true}],
                            ['@babel/plugin-proposal-class-properties',{"loose":true}],
                            "@babel/plugin-transform-runtime"
                        ]
                    },
                    include:path.resolve(__dirname,"src"),
                    exclude:/node_modules/
                }
            },
            {
                test:/\.css$/,use:[
                MiniCssExtractPlugin.loader,
                'css-loader','postcss-loader']
            },
            {
                test:/\.less$/,use:[
                MiniCssExtractPlugin.loader,
                'css-loader','less-loader','postcss-loader']   //把less转化为css
            },
        ]
    }
}