简单的webpack+react的项目搭建

脚手架真的太恶心人咯。前端的技术日新月异，不看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/[email protected]/umd/react.development.js

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

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

npm安装：

npm i react react-dom -P

webpack

推荐局部安装webpack

npm安装：

npm install webpack webpack-cli -D

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

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

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

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"如下

 "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

求星星噢