react+wepack入门(1)

最新推荐文章于 2023-05-19 20:23:38 发布

风火一回

最新推荐文章于 2023-05-19 20:23:38 发布

阅读量973

点赞数

分类专栏： React 文章标签： react webpack webstorm

本文链接：https://blog.csdn.net/mafan121/article/details/71425526

版权

React 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.新建一个空项目

2.生成package.json文件

在Teriminal中执行：

cnpm init

修改生成文件中的scripts：

"scripts": {
    "start": "webpack",
    "dev":"webpack-dev-server"
},

这里的配置意思是：可以用npm start代替webpack命令，用npm run dev 代替webpack-dev-server命令。

3.下载依赖包

依次执行如下语句:

cnpm install -g webpack(如果全局已经安装了，则不需要执行了)

cnpm install -save-dev webpack

cnpm install -save-dev react react-dom

cnpm install --save-dev css-loader sass-loader style-loader url-loader

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

cnpm install -save-dev webpack-dev-server

此时，package.json的内容如下：

{
  "name": "mydemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "dev":"webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  }
}

4.创建项目内容

创建dist目录，目录下创建index.html文件，文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="example"></div>
    <script src="bundle.js"></script>
</body>
</html>

创建src目录，目录下创建entry.js文件，文件内容如下：

let React = require('react');
let ReactDOM = require('react-dom');
// import DemoApp from './components/DemoApp.js';
let HolloTest = require('./components/HolloTest.js');

ReactDOM.render(
    <HolloTest />,
    document.getElementById('example')
);

在src目录下创建compontents目录，目录下创建HolloTest.js文件，内容如下：

let React = require('react');
let HolloTest;
HolloTest = React.createClass({
    render: function () {
        let style = {"color":"blue","font-size":"24px"};
        return (
            <div style={style}>
                hello,this is my first demo!
            </div>
        );
    }
});

module.exports = HolloTest;

5.配置webpack.config.js文件

在项目根目录下创建webpack.config.js文件，文件内容如下：

let path = require('path');
let webpack = require('webpack');

module.exports = {
    entry: __dirname+'/src/entry.js',
    output: {
        path: __dirname+'/dist',
        filename: 'bundle.js'
    },
    resolve: {//指定可以被import的文件名后缀
        extensions: ['.js', '.jsx','.sass','.ts']
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                } //将react编译成js文件
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //打包css文件
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //编译sass文件
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            //对图片进行打包
        ]
    },
    //4、服务器依赖包配置
    devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了
        contentBase: "./dist",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }
}

自此项目创建完成，目录结构如下：（bundle.js需要编译后才能生成，ContentTest.js、DemoApp.js不属于本例）

6.编译运行

在Teriminal中输入：

cnpm start

执行完成后，在输入：

cnpm run dev

打开浏览器输入：http://loaclhost:8080/

这一片讲解的是用require导入模块的，下一篇将讲解使用ES6的语法创建项目

风火一回

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react+wepack入门(1)

1.新建一个空项目2.生成package.json文件在Teriminal中执行：cnpm init修改生成文件中的scripts："scripts": { "start": "webpack", "dev":"webpack-dev-server" },这里的配置意思是：可以用npm start代替webpack命令，用npm
复制链接

扫一扫