一、开发环境配置准备
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、安装
cnpminstallwebpack-dev-server-D
2、基本使用
devServer:{
contentBase:path.join(__dirname,"../dist"),
port:"9000",
historyApiFallback: true,//不跳转
noInfo: true,
inline: true,//实时刷新
disableHostCheck: true,
}