【webpack4.0】---dev.config.js基本配置(六)

1、開發環境配置準備

一、建立dev.config.js文件

用來配置開發環境的代碼

二、安裝webpack-merge

cnpm install webpack-merge -D

用來合併webpack配置項

2、開發環境基礎配置代碼

//合併webpack配置項
constwebpackMerge=require("webpack-merge");
//path模塊
constpath=require("path");
//基礎配置項
constbaseConfig=require("./base.config");
constwebpack=require("webpack");

constwebpackConfig=webpackMerge(baseConfig,{
   mode:"development",
   devtool: 'inline-source-map',
})

module.exports=webpackConfig

 

3、loader處理css

一、安裝

cnpm  install  style-loader  css-loader sass-loader  node-sass   postcss-loader    -D

 

二、基本使用

constwebpackConfig=webpackMerge(baseConfig,{
   mode:"development",
   devtool: 'inline-source-map',
   module:{
       rules:[
          {
               test:/\.(css|scss)$/,
               use:[
                  {loader:"style-loader"},// 將 JS 字符串生成爲 style 節點
                  {loader:"css-loader"},// 將 CSS 轉化成 CommonJS 模塊
                  {
                       loader:"postcss-loader",
                       options:{
                           sourceMap: true,
                           config:{
                               path:"./postcss.config.js"// 在項目根目錄建立此文件
                          }
                      }
                  },
                  {
                       loader:"sass-loader"// 將 Sass 編譯成 CSS
                  }
              ]
          }
      ]
  }
})

三、根目錄下建立postcss.config.js

module.exports={
   plugins: [
       require('autoprefixer')({
           overrideBrowserslist: [
               "Android 4.1",
               "iOS 7.1",
               "Chrome > 31",
               "ff > 31",
               "ie >= 8"
          ],
           grid: true  
      })
  ]
};

4、開啓熱更新

HotModuleReplacementPlugin是webpack自帶的方法

plugins:[
       newwebpack.HotModuleReplacementPlugin()//熱更新
  ]

 

5、webpack-dev-server

一、安裝

cnpminstallwebpack-dev-server-D

二、基本使用

devServer:{
       contentBase:path.join(__dirname,"../dist"),
       port:"9000",
       historyApiFallback: true,//不跳轉
       noInfo: true,
       inline: true,//實時刷新
       disableHostCheck: true,
}