本文共 7043 字，大约阅读时间需要 23 分钟。

1 .下载安装介质

nodejs：

由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm

webstorm：

坑（npm报错）

npm ERR! network If you are behind a proxy, please make sure that thenpm ERR! network 'proxy' config is set properly.  See: 'npm help config'npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\Lengxiaoyu\AppData\Roaming\npm-cache\_logs\2018-10-17T13_59_39_052Z-debug.log

解决方案：

npm config set registry 

2. 构建项目

• 使用webstorm新建一个空白项目
• 通过alt+f12来打开webstorm的控制台
• 在控制台输入以下命令

npm init

npm install webpack webpack-dev-server babel --save-dev

--save-dev 会把下载包的相关信息写到package.json的devDependencies里面方便以后发布，其他人使用的时候只需要npm install就可以把相关的依赖下载到当前的项目里面。

npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react babel-core babel-eslint babel-plugin-import --save-dev

npm install webpack-cli -g

-g表示把这这个包安装在全局中

npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill babel-loader

新建一个webpack.config.js的文件，在文件里面添加如下信息

var webpack = require('webpack');module.exports = {    //2、进出口文件配置    entry:        // 'webpack-dev-server/client?http://localhost:3000',        // 'webpack/hot/only-dev-server',        __dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录    output: {//输出        path: __dirname+'/index',//输出路径        filename: 'bundle.js',//输出文件名        publicPath: '/index/'    },    module: {//在配置文件里添加加载器说明，指明每种文件需要什么加载器处理，        // 配置规则时不应加载json-loader，因为现在的版本本身会解析json数据，再加载一次会导致json被解析两次，出现错误        rules: [{            test: /\.js$/,            exclude: /node_modules/,            loader: 'babel-loader',        }, {            test: /\.vue$/,            exclude: /node_modules/,            loader: 'vue',        }, {            test: /\.css$/,            exclude: /node_modules/,            // loader: "css-loader!style-loader",            use: [                {                    loader: "style-loader"                },                {                    loader: "css-loader",                    options: {                        importLoaders:1                    }                },            ]        }, {            test: /\.(html|tpl)$/,            exclude: /node_modules/,            loader: 'html'        }, {            test: /\.jsx$/,            exclude: /node_modules/,            loaders: ['jsx', 'babel']        }],        noParse: /jquery|lodash/,        unknownContextRegExp: /$^/,        unknownContextCritical: false,        exprContextRegExp: /$^/,        exprContextCritical: false,        wrappedContextRegExp: /$^/,        wrappedContextCritical: false,    },    //4、服务器依赖包配置    devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了        contentBase: "./index",//本地服务器所加载的页面所在的目录        historyApiFallback: true,//不跳转        inline: true//实时刷新        //hot：true,//不要书写该属性，否则浏览器无法自动更新        //publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径    },    plugins:[]//插件}

新建一个.babelrc的文件，在文件里面添加如下信息

{  "presets": ["@babel/preset-env","@babel/preset-react"]}

新建一个.eslintrc的文件，在文件里面添加如下信息

{  "env": {    "browser": true,    "commonjs": true,    "es6": true  },  "parserOptions": {    "ecmaVersion": 6  },  "rules": {    "indent": ["error", 2],    "no-mixed-spaces-and-tabs": "error",    "camelcase": "error",    "eqeqeq": "warn",    "curly": "error",    "no-undef": "error",    "no-unused-vars": "warn",    "max-params": "warn"  }}

新建一个server.js的文件，在文件里面添加如下信息

var webpack = require('webpack');var WebpackDevServer = require('webpack-dev-server');var config = require('./webpack.config');new WebpackDevServer(webpack(config), {    contentBase : './index/',//用来指定index.html所在目录    publicPath: config.output.publicPath,//用来指定上线时运行地址    hot: true,//表示热加载，使用Inline:true可以自动刷新    inline:true,//启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。    historyApiFallback: true/*    指的是当路径匹配的文件不存在时不出现404，也可以通过如下面设置指定    当路径匹配的文件不存在时跳转的页面     historyApiFallback:{            index:'build/index.html'        },     */    // 'disableHostCheck' : true    //不检查host地址}).listen(3000, 'localhost', function (err, result) {    if (err) {        return console.log(err);    }    console.log('Listening at http://localhost:3000/');});

修改package.json修改为如下内容：

{  "name": "pockerui",  "version": "1.0.0",  "description": "test",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "node server.js"  },  "author": "",  "license": "ISC",  "dependencies": {    "@babel/preset-react": "^7.0.0",    "c-p": "^1.3.5",    "chromedriver": "^2.42.1",    "ismobilejs": "^0.4.1",    "react": "^16.1.1",    "react-dom": "^16.1.1"  },  "devDependencies": {    "@babel/core": "^7.0.0-beta.31",    "@babel/preset-env": "^7.0.0-beta.31",    "babel-loader": "^8.0.0-beta.0",    "babel-preset-es2015": "^6.24.1",    "babel-preset-es2017": "^6.24.1",    "babel-preset-react": "^6.24.1",    "colors": "^1.1.2",    "css-loader": "^0.28.0",    "es6-promise-promise": "^1.0.0",    "eslint": "^3.19.0",    "extract-text-webpack-plugin": "^3.0.2",    "file-loader": "^0.11.2",    "html-webpack-plugin": "^2.28.0",    "imports-loader": "^0.7.1",    "jsdoc": "^3.4.3",    "json-loader": "^0.5.4",    "less": "^2.7.2",    "less-loader": "^4.0.3",    "prompt": "^1.0.0",    "pug": "^2.0.0-rc.4",    "pug-loader": "^2.3.0",    "sqlite3": "^3.1.8",    "stats.js": "^0.17.0",    "style-loader": "^0.16.1",    "webpack": "^4.17.1",    "webpack-cli": "^3.1.0",    "webpack-dev-server": "^3.1.7",    "webpack-notifier": "^1.5.0",    "xlsx": "^0.11.8"  }}

css文件夹下创建文件index.css，文件内容如下:

p{    font-size: 24px;    padding:0 100px;    color:blue;}p:nth-of-type(2) {    font-size: 30px;    text-align: center;    color:black;    font-family:"幼圆";}p:nth-of-type(3) {    color: red;    font-weight:bold;    text-align: right;}

data文件夹下，创建文件index.json，文件内容如下:

{"name":"hello webpack", "content":"this is my first demo", "start":"Ready Go!"}

index文件夹下，创建文件index.html，文件内容如下

jsproject文件夹下，创建文件createdom.js，文件内容如下

import React, { Component } from 'react';var message=require('./../data/index.json');export default class App extends Component {    render() {        return (        
   
            
    
{message.name}
            
    
{message.content}
            
    
{message.start}
        
   
    );    }}// module.exports = function() {//     var greet=document.createElement('div');//     greet.innerHTML="
"+message.name+"
"+"
"+message.content+"
"+"
"+message.start+"
";//     return greet;// };

jsproject文件夹下，创建文件entry.js，文件内容如下

require('./../css/index.css');import React from 'react';import ReactDOM from 'react-dom';import App from './createdom';// var createdom = require('./createdom.js');// document.getElementById('app').appendChild(createdom());ReactDOM.render(
   , document.getElementById('app'));

此时的目录结构如下：

3.项目运行

控制台输入：

npm run start

查看demo效果，需在浏览器中访问链接：http://localhost:3000/

网上找的帖子，真心是坑啊，最后一步不好使，找了一个多小时，差点放弃。主要问题是版本兼容的问题，package.json的修改了一个多小时，前端要是有maven这样子的管理工具就好了，解决版本匹配问题。

转载地址：https://lemonstone.blog.csdn.net/article/details/83118700 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！