- 开发环境 —— src
程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告 - 生产环境 —— 打包上线
正式提供对外服务的 - 文件夹路径
- webpack.dev.js
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"), //base
output: { //pro
path: path.join(__dirname, "build"),
filename: "[hash]-[name].js"
},
module: {
rules: [{
test: /\.(js|jsx)$/, //base
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
}
}, {
test: /\.css$/, //base
use: ["style-loader", "css-loader"]
}, {
test: /\.scss$/, //dev
use: ["style-loader","css-loader", "sass-loader"]
use: extracttextwebpackplugin.extract({ //pro
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
}, {
test: /\.(jpg|gif|jpeg|png)$/, //base
loader: "url-loader",
options: {
limit: 4000,
name: "./img/[name].[ext]"
}
}, {
test: /\.(eot|svg|ttf|woff)$/, //base
loader: "file-loader",
options: {
name: "./font/[name].[ext]"
}
}, {
test: /\.html$/, //base
loader: "html-loader",
}
]
},
plugins: [
new extracttextwebpackplugin("styles.css"), //pro
new CleanWebpackPlugin(), //base
new HtmlWebpackPlugin({ //base
template: "index.html",
filename: "app.html",
inject: true,
// title: "1701"
}),
new webpack.HotModuleReplacementPlugin(), //dev
],
devServer: { //dev
port: 8689,
open: true,
hot: true,
before(app) {
app.get("/api/list", (req, res, next) => {
res.json()
})
}
}
}