本文共 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,文件内容如下
myFirstDemo
jsproject文件夹下,创建文件createdom.js,文件内容如下
import React, { Component } from 'react';var message=require('./../data/index.json');export default class App extends Component { render() { return (); }}// module.exports = function() {// var greet=document.createElement('div');// greet.innerHTML="{message.name}
{message.content}
{message.start}
"+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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!