美文网首页
webpack新建react项目

webpack新建react项目

作者: 墨墨_5e5f | 来源:发表于2018-04-21 17:00 被阅读0次

    新建项目文件夹

    mkdir react -webpack
    
    cd react -webpack
    
    npm init //生成package.json
    

    安装webpack

    npm install -g webpack(安装过的请忽略这一步)//全局安装webpack
    
    npm install --save-dev webpack                 //安装到你的项目目录
    

    安装babel全家桶

    npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
    

    安装react,react-dom

    npm install --save-dev react react-dom
    

    安装css-loader依赖

    npm install --save-dev css-loader style-loader
    

    创建react相关页面

    创建一个webpack.config.js配置如下

    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
        entry: path.resolve(__dirname, './src/index.js'),
        output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
        },
    
        devServer: {
            contentBase: "./dist",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true,//实时刷新
            port: 8080,//设置默认监听端口,如果省略,默认为"8080"
        },
    
        module: {
            rules: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
                query: {
                    presets: ['env','react']
                }
            }]
        }
    };
    

    Webpack //运行生成bundle.js

    npm install --save-dev webpack-dev-server
    
    npm install webpack-cli -D
    
    "scripts": {
        "dev": "webpack-dev-server"
      }
    

    相关文章

      网友评论

          本文标题:webpack新建react项目

          本文链接:https://www.haomeiwen.com/subject/anexlftx.html