webpack4.0+react16.0+es6简单环境搭建与配置

webpack参考文档：https://www.valentinog.com/blog/webpack-4-tutorial/

react:参考文档：https://reactjs.org/docs/add-react-to-a-new-app.html

es6参考文档：http://www.ruanyifeng.com/blog/2017/09/es6_primer_3rd_edition.html

let's start

一、安装运行环境：node.js

1、应用程序下载地址：https://nodejs.org/en/

node -v 查看node版本(我的V9.9.0V） ;npm -v我的版本(v5.7.1)

2、安装yarn 依赖包管理工具

npx install -g yarn

二、react应用程序

1、创建react简单应用

在命令行运行

np install -g create-react-app(可用于生成一个简单的react应用程序，需要安装在全局环境中)

create-react-app webpack-react（创建react projects 命名为webpack-react名字自定义）

文件结构如下：

2、运行react

cd webpack-react

yarn start //简单的react就克在浏览器中打开了

三、配置webpack

1、安装webpack依赖项，webpack运行需要的一些依赖项

npx install webpack webpack-cli webpack-dev-server --save-dev

2、安装es6转码器，es6的一些新语法特性旧版本的浏览器识别不了，需要通过转码器将其转换成es5语法。

npm i babel-core babel-loader babel-preset-env --save-dev

3、配置转码文件，新建一个文件命名为.babelrc,内容如下：

{

“presets”:[

"react","env","stage-2"
]

}

3、配置webpack

根目录下新建目录webpack,在此目录下新建三个文件一个保存基础配置，一个用于开发环境配置，一个用于生产环境配置

4、配置webpack.base.config.js文件

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//html插件，需要安装依赖项 npm install htmp-webpack-plugin --save-dev
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//压缩css文件
module.exports = {
    entry:{
        main: path.join(__dirname,"../src/index.js"), //入口文件
        common:['react','react-dom']
    },
    output:{
        path:path.join(__dirname,"../build"),//出口文件
        filename:"[name].js",

    },
    resolve:{
        extensions:['.js','.jsx','json','.css'], //需要编译的文件类型
    },
    performance: {
        hints: false
    },
    module:{
        rules:[
            {
                test: /\.(js|jsx)?$/,
                exclude:/(node_modules)/,
                loader:'babel-loader'     //jsx js转码配置
            },
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader'], //css转码，需要安装依赖项css-loader

            },

{
    test: /\.(scss|sass)$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }]

},

{ test: /\.html$/, use:[ { loader: 'html-loader', options: { minimize: true} } ] }, { test: /\.(ico)$/, use: "raw-loader", //加载ico文件 }, { test: /\.(svg|png)$/, use: 'file-loader', //加载文件 } ] }, plugins:[ new HtmlWebpackPlugin({ filename: "index.html", template: path. join(__dirname, "../public/index.html") }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ]}

5、配置webpack.dev.config.js文件

const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");//文件合并
const webpackConfigBase = require("./webpack.base.config");
const openBrowserPlugin = require('open-browser-webpack-plugin');//在浏览器中打开程序

const webpackConfigDev = {
    mode:'development',
    plugins:[
        // new openBrowserPlugin({url:"http://localhost:8080"})
    ],
    devServer:{
        contentBase: path.join(__dirname,"../public"),
        hot: true,
        host:'0.0.0.0',
        inline: true,
        port: 8080,
    }
}
module.exports = merge(webpackConfigBase, webpackConfigDev);

6、配置webpack.prod.config.js文件

const webpack = require("webpack");
const path = require("path");
const webpackConfigBase = require("./webpack.base.config");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const merge = require("webpack-merge");
const webpackConfigProd = {
    mode: "production",
    plugins:[
        new  CleanWebpackPlugin(["build"],{
        root: path.join(__dirname,"../")
        })
    ]
};
module.exports = merge(webpackConfigBase, webpackConfigProd);

//webpack中用到的一些插件以及转码器需要自己安装

7、配置package.json文件

  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.4.0",
    "node-sass": "^4.8.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1",
    "remove": "^0.1.5",
    "url-loader": "^1.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server  --hot --inline --color --hot --config ./webpack/webpack.dev.config.js",
    "build": "webpack --config ./webpack/webpack.prod.config.js",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-import": "^1.6.7",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    "mini-css-extract-plugin": "^0.2.0",
    "open-browser-webpack-plugin": "^0.0.5",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.7",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1",
    "webpack-merge": "^4.1.2"
  }
}

8、运行环境，执行npm start /npm build就可以运行webpack程序啦

代码请查看我得github:https://github.com/xiaoyaoyao/webpack-react

//周末木有睡懒觉写的噢噢，记得点赞！

webpack4.0+react16.0+es6简单环境搭建与配置

猜你喜欢