一直用React脚手架做项目,今天突发奇想,想自己用webpack搭建了一下react的环境,结果真是历经千辛万苦,各种少模块,各种不兼容,最后终于成功了。保存下来以后好直接拿来用!
webpack.config.js
const baseConfig = require("./config/base")
const devConfig = require("./config/dev")
const prodConfig = require("./config/prod")
module.exports = function(param){
let config = null;
if(param === "prod"){
config = {
...baseConfig,
...prodConfig.config,
};
config.output.filename = prodConfig.filename;
}else{
config = {
...baseConfig,
...devConfig
}
}
return config;
}
config中的base.js
let config = {
entry :{
main: "./src/main.js" //入口文件
},
output: {
path: __dirname + "/../dist",//生成的目录
filename: 'js/[name].js' //生成js
}
}
module.exports = config;
config中的dev.js 这里是开发打包
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")
const config = {
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html", //你的首页
minify:{
collapseWhitespace:true
}
}),
new ExtractTextWebpackPlugin("css/style.css")
],
module:{
rules:[
{
test: /\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback: "style-loader",//从哪里取出样式
use:["css-loader",{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")
]
}
}]//顺序是由后向前查找
})
},
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use:['css-loader',{
loader:"postcss-loader",//自动兼容前缀
options:{
plugins:[
require("autoprefixer")//自动兼容前缀
]
}
},"sass-loader"]
})
},
{
test: /\.js$/,
exclude: /node_modules/, //除这个文件夹以外
loader: 'babel-loader',
query:{
presets: ['es2015','react']
}
}
]
}
}
module.exports = config;
config中的prod.js 这里是上线打包
const config = {
mode : "production",
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html", //你的首页
minify:{
collapseWhitespace:true
}
}),
new ExtractTextWebpackPlugin("css/style.css")
],
module:{
rules:[
{
test: /\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback: "style-loader",//从哪里取出样式
use:["css-loader",{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")
]
}
}]//顺序是由后向前查找
})
},
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use:['css-loader',{
loader:"postcss-loader",//自动兼容前缀
options:{
plugins:[
require("autoprefixer")//自动兼容前缀
]
}
},"sass-loader"]
})
},
{
test: /\.js$/,
exclude: /node_modules/, //除这个文件夹以外
loader: 'babel-loader',
query:{
presets: ['es2015','react']
}
}
]
}
}
module.exports = {
config,
filename: "js/[name]_[hash].js" //自动生成后缀
}
package.json
{
"name": "reactdome",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "webpack --env prod",
"dev": "webpack --watch",
"start": "npm run dev"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.4.10",
"babel": "^6.23.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
],
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4"
}
}
把上面几个文件建好以后,在新建一个src文件夹,新建index.html首页文件和main.js入口文件,这样就完事了!
直接运行npm install 下载所有的模块,运行npm start 是测试打包 运行npm run build 是上线打包!