D1.1.利用npm(webpack)构建基本reactJS项目

Posted NEIL_X

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D1.1.利用npm(webpack)构建基本reactJS项目相关的知识,希望对你有一定的参考价值。

前提: 已经安装nodejs和npm

#全局安装webpack 自动构建化工具,职能管理项目;webpack-dev-server是开发工具,提供 Hot Module Replacement 功能
# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html

npm install -g webpack webpack-dev-server

 

#在项目文件夹路径下,初始化npm项目

npm init

 

#安装webpack和webpack-dev-server到项目中

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

 

#可选:
#安装css-loader、 style-loader、 image-loader,可以在js下加载css样式文件和图片(可选)

(webpack还可以安装其他功能,如code-splitting等)

npm install css-loader style-loader image-loader --save

 



#安装reactJs依赖包(react react-dom)和babel依赖包(转换jsx-js等)

npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core

 

#新建webpack.config.js到根目录下,添加以下内容(loader可选):

module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: ‘babel-loader?presets[]=es2015&presets[]=react‘,
}, {
test: /\.css$/,
loader: ‘style-loader!css-loader‘
},{ test: /\.(png|jpg)$/, 
loader: ‘url-loader?limit=8192‘
}
]
}
};

 

#在package.json下添加脚本

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --devtool eval --progress --colors --hot",
"deploy": "NODE_ENV=production webpack -p",
"deploy-windows": "SET NODE_ENV=production & webpack -p ",
"validate": "npm ls"
}

 

#添加各个文件到根目录下
---index.js

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;

ReactDOM.render(<h1>我的世界</h1>,document.querySelector(‘#container‘));

 

--index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>index</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="container">

    </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

</html>

 

#运行后打开http://127.0.0.1:8080/ 即可以

npm start

 






以上是关于D1.1.利用npm(webpack)构建基本reactJS项目的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用

webpack优化篇(四十六):充分利用缓存提升二次构建速度

webpack 构建项目入门

发布使用 webpack 和 babeljs 构建的 npm 包

使用 npm 构建 webpack-typescript 库以用于其他 webpack-typescript 项目

AWS Elastic Beanstalk - 如何使用 npm 和 webpack 构建捆绑 JS