webpack打包(2)

　　　　module.exports中的 devServer属性:

　　　　　　　　　　　　　　　　　　　　 用来自动化(自动编译，自动打开浏览器 自动刷新浏览器    只会在内存中编译打包  不会有任何输出

　　　　　　　　　　　　　　　　　　　　 启动指令为npx webpack-dev-server

　　　　　　　　　　　　　　　　　　　　devServer:{

　　　　　　　　　　　　　　　　　　　　　　　　　　contentBase:resolve(__dirname,'build'),    //项目构建后的路径

　　　　　　　　　　　　　　　　　　　　　　　　　　compress:true,　　//启动gzip压缩

　　　　　　　　　　　　　　　　　　　　　　　　　　port:3000,　　　　//启动端口号

　　　　　　　　　　　　　　　　　　　　　　　　　　open:true　　　　//自动打开浏览器

　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　提取css成单独文件:         安装插件    npm i mini-css-extract-plugin -D

　　　　　　　　　　　　　　　　module:{

　　　　　　　　　　　　　　　　　　　　rules:[

　　　　　　　　　　　　　　　　　　　　　　{

　　　　　　　　　　　　　　　　　　　　　　　　test:/\.css$/,

　　　　　　　　　　　　　　　　　　　　　　　　use:[

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　MiniCssExtractPlugin.loader,    //这个loader取代style-loader       作用:提取js中的css成单独文件

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　'css-loader'     //将css文件整合到js文件中　

　　　　　　　　　　　　　　　　　　　　　　　　　　]

　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　]

　　　　　　　　　　　　　　　　　　},

　　　　　　　　　　　　　　　　plugins:[

　　　　　　　　　　　　　　　　　　　　　new MiniCssExtractPlugin({    filename:'css/built.css'  //对输出的css文件进行重新命名   })

　　　　　　　　　　　　　　　　　　　　]

　　　　css兼容写法：  安装插件      npm install postcss-loader postcss-preset-env -D　　　　　　

{       
　　　　　　　　　　　　// module中的配置项
                test:/\.css$/,
                use:[
                    //取代css-loader,提取js中css成单独文件
                    MiniCssExtractPlugin.loader,
                    //将css文件整合到JS文件中
                    'css-loader',
                    //css兼容性处理：postcss --> postcss-loader postcss-preset-env
                    //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                    {
                        loader:'postcss-loader',
                        options: {
                            ident: 'postcss',//默认配置
                            plugins: () => [
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            },　　　　
　　　　//配置package.json中的browserslist

"browserslist":{
    "development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production":[
      ">0.1%",
      "not dead",
      "not op_mini all"
    ]
  }

css的压缩  :  npm install optimize-css-assets-webpack-plugin -D
　　　　　　　　

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'//对输出的文件进行重命名
        }),
        //压缩css文件
        new OptimizeCssAssetsWebpackPlugin()
    ]
js的兼容性处理  ：    安装插件  npm i babel_loader   @babel/preset-env @babel/core -D
　　　　　　　　　　　在module中进行配置
　　　　　　　　　　　　　　　　　　　　　　

{

                test:/\.js$/,

                exclude:/node_modules/,

              loader:'babel-loader',

              options:{

                //   预设:指示Babel做什么样的兼容性处理

                presets:[

                    [

                        '@babel/preset-env',

                        {       

                            // 按需加载

                            useBuiltIns:'usage',

                            // 指定版本

                            corejs:{

                                version:3

                            },

                            // 指定兼容心啊做到那个版本的浏览器

                            targets:{

                                chrome:'60',

                                firefox:'60',

                                ie:'9',

                                safari:'10',

                                edge:'17'

                            }

                        }

                    ]

                ]

              }

          }

js的压缩：在生产环境下会自动压缩js代码