webpack --搭建基础开发环境

webpack 搭建基础开发环境

1. 配置css
2. 配置js
3. 配置html
4. 配置图片
5. 配置文件

1.css 打包配置

1. 把css抽离单独的文件
   （1）安装 mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

（2）plugin 中加入MiniCssExtractPlugin 并设置打包文件名

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 new MiniCssExtractPlugin({
    
    
            fileName:"css/build.css"
        }),

（3）rules 配置加载loader

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

2. css 浏览器兼容性
   （1）使用postcss-loader

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

{
    
    
     // 还需要在package.json配置兼容浏览器 定义nodejs环境变量 使用browserlist 环境 
     loader:"postcss-loader",
     options:{
    
    
         ident:'postcss',
         plugins:()=>[
             require('postcss-preset-env')()
         ]
     }
 }

（2）在package.json配置兼容浏览器

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

（3）nodejs环境变量

process.env.NODE_ENV = 'production';//development

3. 文件压缩
   （1）安装 optimize-css-assets-webpack-plugin

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

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")//css 压缩

（2）直接使用

 new OptimizeCssAssetsWebpackPlugin(),

2.js 打包配置

1 加入校验 eslint-loader

npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import --save-dev

 {
    
    
      test:/\.js$/,
       enforce:"pre",
       exclude:/node_modules/,
       use:"eslint-loader",
       options:{
    
    
           fix:true
       }
   },

在package.json 中加入配置

 "eslintConfig": {
    
    
    "extends": "airbnb-base"
  }

2 解决浏览器兼容性 babel-loader
（1）加载loader

npm install -D babel-loader @babel/core @babel/preset-env core-js

{
    
    
      test:/\.js$/,
      // exclude:/node_modules/,
      loader:"babel-loader",
      options:{
    
    
          presets:[
              [
                  "@babel/preset-env",
                  {
    
    
                      useBuiltIns:'entry',
                      corejs:{
    
    
                          version:3
                      },
                      targets:{
    
    
                          'chrome':'60',
                      }
                  }
              ]
          ]
      }
  }

3.图片 打包配置

npm install url-loader --save-dev

{
    
    
    test:/\.png|jpg|gif/,
     loader:'url-loader',
     options:{
    
    
         name:'[hase:10].[ext]',
         limit:8*1024,
         outputPath:'images',
         esModule:false
     }
 }

4.html 配置

（1）下载

npm install --save-dev html-webpack-plugin

（2）plugin

 new HtmlWebpackPlugin({
    
    
       template:"./src/index.html",
         minify:{
    
    
             collapseInlineTagWhitespace:true,
             removeComments:true
         }
     })

（3）处理html引入图片

npm install --save-dev html-loader

 {
    
    
   test:/\.html$/,
     loader:'html-loader'
 }

5.处理其他文件

 npm install file-loader --save-dev

{
    
    
     exclude:/\.js|css|less|html|jpg|png|gif$/,
     loader:'file-loader',
     options:{
    
    
         outputPath:"media"
     }
 }