美文网首页
鉴于安装项目遇到的问题,自己写了一个教程,希望能帮助到大家

鉴于安装项目遇到的问题,自己写了一个教程,希望能帮助到大家

作者: H5日常记 | 来源:发表于2018-05-24 17:22 被阅读0次

    新建一个项目并进入到新建的目录中

    npm init  初始化

    npm install webpack --save-dev  安装webpack

    在 package.json  scripts处添加

    "dev":"webpack-dev-server --env development"

    新建webpack.config.js 配置文件

    npm install webpack-cli -D  安装 webpack-cli 包

    {/*

    const path = require('path'); //node的路径模块

    module.exports = {

    entry: {

    app: ["./main.js"] //入口文件

    },

    output: {

    path: '/',//输出位置

    filename: "bundle.js"//输入文件

    }

    };

    */}

    创建main.js文件的入口

    并写入

    {/*

    var el = document.getElementById('app');

    el.innerHTML = 'webpack-dev-server 服务启动了';

    */}

    npm run dev  运行 (默认端口号  8080)

    {/*运行成功*/}

    {/*开始引入 react 项目*/}

    npm install react react-dom  --save-dev

    {/*安装babel*/}

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

    {/*在main.js 写入文件*/}

    {/*

    import React from 'react';

    import ReactDOM from 'react-dom';

    ReactDOM.render(

    运行成功

    ,

    document.getElementById('app')

    );

    */}

    {/*

    module: {

    rules: [

    {

    test: /\.js$/, // babel 转换为兼容性的 js

    exclude: /node_modules/,

    loader: 'babel-loader',    //主要添加babel支持

    query: {

    presets: ['react', 'latest']

    }

    }

    ]

    }

    */}

    {/*

    重新执行命令

    npm run  dev

    */}

    相关文章

      网友评论

          本文标题:鉴于安装项目遇到的问题,自己写了一个教程,希望能帮助到大家

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