一起学习webpack-第二节

devServer

开发服务器配置 用来自动编译,自动打开浏览器,自动刷新浏览器等,

module.exports = {
    // webpack配置

    // 入口文件
    entry: './src/index.js' ,

    // 出口文件
    output: {
        // 输出文件的名字
        filename: 'built.js',
        // 输出路径
        path: resolve(__dirname, "build")
    },

    // loader配置
    module:{
      ...
    },
    // plugins配置
    plugins: [
     	...
    ],
    // 模式  production(生产模式) | development(开发模式)
    mode: 'development' ,
    // 开发服务器配置 用来自动编译,自动打开浏览器,自动刷新浏览器等
    // 启动devServer 需要使用 webpack-dev-server
    devServer: {
        // 打包后的目录
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true ,
        // 启动的端口
        port: 3000,
         // 自动打开浏览器
        open: true,
    }
}

安装依赖

npm install webpack-dev-server --save-dev
# 由于兼容性问题 webpack-cli版本需要降低
npm install --save-dev webpack-cli@3.3.12

启动

 npx webpack-devserver

CSS 兼容性处理

npm i postcss-loader postcss-preset-env -D

// 
const { resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

// 提取CSS成一个单独的文件
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 设置node.js环境变量(激活开发环境)
process.env.NODE_ENV = 'development'

module.exports = {
    // webpack配置

    // 入口文件
    entry: './src/index.js' ,

    // 出口文件
    output: {
        // 输出文件的名字
        filename: 'js/built.js',
        // 输出路径
        path: resolve(__dirname, "build")
    },

    // loader配置
    module:{
        rules: [
            // 详细的loader配置
            
            {
                // 匹配那些文件
                test: /\.css$/ , // 以CSS结尾的文件
                // 使用那些Loader
                use: [
                    // 'style-loader',
                    // 取代style-loader, 作用 提取JS中的CSS成为独立文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    /*
                     * CSS 兼容性处理： postcss -> postcss-loader postcss-preset-env
                        帮助 postcss package.json中的browserslist里面的配置,通过配置加载指定的CSS兼容性样式
                        "browserslist":{
                            "development": [
                            "last 1 chrome version" ,
                            "last 1 firefox version" ,
                            "last 1 safari version"
                            ],
                            "production": [
                            ">0.2%",
                            "not dead",
                            "not op_mini all"
                            ]
                        }
                     */
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [["postcss-preset-env",{}]]
                            }
                        }
                    }
                     
                ]
            },
        ]
    },
    // plugins配置
    plugins: [
        // 默认创建空的HTML,自动引入打包输出的所有资源(JS/CSS)
        new HtmlWebpackPlugin({
            // 复制 './src/index.html', 并自动引入到打包后的html文件内
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 提取到css 路径下
            filename: 'css/built.css'
        })
    ],
    // 模式  production(生产模式) | development(开发模式)
    mode: 'development' ,
   
   
}

压缩CSS

npm i optimize-css-assets-webpack-plugin -D

// 
const { resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

// 提取CSS成一个单独的文件
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 压缩CSS optimize-css-addets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置node.js环境变量(激活开发环境)
process.env.NODE_ENV = 'development'

module.exports = {
    // webpack配置

    // 入口文件
    entry: './src/index.js' ,

    // 出口文件
    output: {
        // 输出文件的名字
        filename: 'js/built.js',
        // 输出路径
        path: resolve(__dirname, "build")
    },

    // loader配置
    module:{
        
    },
    // plugins配置
    plugins: [
       ...
        // 压缩CSS
        new OptimizeCssAssetsWebpackPlugin()
    ],

语法检查

 npm i eslint-loader eslint -D

移除HTML内的空格和注释

 plugins: [
        // 默认创建空的HTML,自动引入打包输出的所有资源(JS/CSS)
        new HtmlWebpackPlugin({
            // 复制 './src/index.html', 并自动引入到打包后的html文件内
            template: './src/index.html',
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        })
    ],

JS兼容性处理

{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader  @babel/preset-env @babel/core corejs
                enforce: 'pre',// 当多个loader都要处理JS文件时,按照顺寻执行, 但是设置这个属性后,就可以优先执行
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: '60',
                                    firefox: '50'
                                }
                            }
                        ]
                    ]
                }
            },

对所有JS进行兼容性处理

npm i @babel/polyfill -D

// 只需要这入口文件内引入即可
import '@babel/polyfill'