简单的webpack+react的项目搭建

版权声明：转载请注明原作者与博客地址 https://blog.csdn.net/u012312705/article/details/81751035

脚手架真的太恶心人咯。前端的技术日新月异，不看API连方法变了都不知道

废话少说，开始搭建吧

首先是nodejs和npm，webpack是依赖于nodejs的，npm是包管理工具，由于比较简单且老生长谈，这里不做赘述，提供一个网址参考一下https://www.runoob.com/nodejs/nodejs-tutorial.html

然后在项目根目录下执行npm init 会自动创建一个package.json文件

写在前面：

npm常用知识：

npx命令是从bin目录下执行包，多用于非全局安装的包的调用，也可以直接通过寻找文件的形式调用包

package.json中的 "scripts"是注册一条命令，可以用npm run <命令名> 调用

npm中 -D(-dev--save)是在开发环境下安装包，-P(-prod--save)是在生产环境下安装包，-g(--global)全局安装，注意-P是较新版才有的哦

 

React

react可以直接下载或者用npm下载

https://unpkg.com/react@16.4.2/umd/react.development.js

https://unpkg.com/react-dom@16/umd/react-dom.development.js

右键网页保存或者直接引入script标签都可以，由于webpack的存在，不推荐直接使用script标签

npm安装：

[code]npm i react react-dom -P

webpack

推荐局部安装webpack

npm安装：

[code]npm install webpack webpack-cli -D

loader和常用插件安装(我不确定我写错没吼)

[code]npm install less-loader style-loader css-loader url-loader babel-core file-loader babel-loader babel-preset-env babel-preset-react clean-webpack-plugin extract-text-webpack-plugin   webpack-dev-server html-webpack-plugin -D

webpack配置

在项目根目录下创建文件 webpack.config.js

下面上我的配置文件以供参考

[code]const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
const extractCSS = new ExtractTextPlugin({
filename: 'stylesheets/[name].css',
disable: process.env.WEBPACK_ENV === "dev",
ignoreOrder: true
});
const extractLess = new ExtractTextPlugin({
filename: "stylesheets/[name].css",
disable: process.env.WEBPACK_ENV === "dev",
ignoreOrder: true
});
module.exports = {
mode: "development",
entry: path.resolve(__dirname, './package.jsx'),
devtool: 'inline-source-map',
devServer: {
port: 8086
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "js/[name].js",
chunkFilename: 'js/[name].chunk.js',
publicPath: '/dist/'
},
optimization: {
splitChunks: {
chunks: 'initial',
cacheGroups: {
vendor: {
test: /node_modules\//,
name: 'vendor',
priority: 10,
enforce: true
},
commons: {
test: /public\//,
name: 'public',
priority: 10,
enforce: true
}
}
},
runtimeChunk: {
name:'mainfest'
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react'],
}
}
},
{
test: /\.css$/,
use: extractCSS.extract({use :['css-loader'],fallback: 'style-loader'})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[ext]'
}
}
]
},
{
test: /\.less$/,
use: extractLess.extract(['css-loader','less-loader'],'style-loader')
}, {
test: /\.ejs$/,
loader: 'ejs-loader'
},{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'font/[name].[ext]'
}
}
]
}
]
},
plugins: [
extractLess,
extractCSS,
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'view/index.html',
template: 'view/react_demo.html'
}),
()=>{
if(WEBPACK_ENV === 'dev') new webpack.HotModuleReplacementPlugin()
}
]
}

其中最重要的参数是entry和output前者是打包的入口，webpack会根据你打包入口的依赖项自动为你打包所用到的文件。

后者是打包后文件的输出位置，我这里放到了dist/js目录下其中WEBPACK_ENV是环境变量，判断是在开发环境还是生产环境，由于某些插件非常的消耗性能，所以不能在生产环境下使用，这里就要用到这个变量来判断了

其中还有很多配置的项目，请参照webpack的API文档。

环境变量设置

在package.json里修改"scripts"如下

[code] "scripts": {
"w": "npx webpack",
"ws": "npx webpack-dev-server",
"wo": "WEBPACK_ENV=online npx webpack -P",
"wo_win": "set WEBPACK_ENV=online&& npx webpack -P"
},

不懂命令行意思的请先看前言噢~~

其中webpack-dev-server给我们提供了一个开发时的小型服务器，避免我们每次修改文件都要进行一次打包，我这里是用的ws作为名字封装

其中注意，wo和wo_win是修改webpack环境变量的语句，其中wo是用在类unix系统下的，wo_win是用在windows系统下的。

如果你把入口的文件设置好了，那么就可以来一次华丽的npm run w 啦，然后你可以祈祷自己不要出错。。emmmm。。

作者这个简单的脚手架虽然撘得不是很好，但是还是可以用的~放一下github地址

https://github.com/xxx407410849/Reactcli

求星星噢

阅读更多