- 开发环境 —— src,development
- 程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告
- 生产环境 —— 打包上线,production
- webpack.dev.js
"scripts": {
"build": "webpack --config webpack.dev.js --mode production",
"dev": "webpack-dev-server --config webpack.dev.js --mode development"
},
const path = require("path");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "build"),
filename: "[hash]-[name].js"
},
module: {
rules: [{
test: /\.(js|jsx)$/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
}
}, {
test: /\.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /\.scss$/,
use: ["style-loader","css-loader", "sass-loader"]
use: extracttextwebpackplugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
}, {
test: /\.(jpg|gif|jpeg|png)$/,
loader: "url-loader",
options: {
limit: 4000,
name: "./img/[name].[ext]"
}
}, {
test: /\.(eot|svg|ttf|woff)$/,
loader: "file-loader",
options: {
name: "./font/[name].[ext]"
}
}, {
test: /\.html$/,
loader: "html-loader",
}
]
},
plugins: [
new extracttextwebpackplugin("styles.css"),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "index.html",
filename: "app.html",
inject: true,
}),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
port: 8689,
open: true,
hot: true,
before(app) {
app.get("/api/list", (req, res, next) => {
res.json()
})
}
}
}