【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,
}