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

一、开发环境配置准备

1、创建dev.config.js文件

用来配置开发环境的代码

2、安装webpack-merge

cnpm install webpack-merge -D

用来合并webpack配置项

二、开发环境基础配置代码

//合并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

三、loader处理css

1、安装

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

2、基本使用

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
                  }
              ]
          }
      ]
  }
})

3、根目录下创建postcss.config.js

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

四、开启热更新

HotModuleReplacementPlugin是webpack自带的方法

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

五、webpack-dev-server

1、安装

cnpm install webpack-dev-server -D

2、基本使用

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