Welcome everyone

基于webpack开发React

前端 汪明鑫 353浏览 0评论

什么是Webpack?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

 

简单来说,webpack就是项目打包成js的工具。

 

Webpack的工作方式

把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

 

 

 

安装webpack

 

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

 

安装 CLI,没装,会提示你装

npm i webpack-cli -g

 

当我想确认是否安装成功,输入 webpack -v  可以得到版本号

 

搭建开发React的webpack环境

1,得到package.json文件

npm init

自动创建这个package.json文件

这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等

初始文件里这样就行:

{
  "name": "learnWebpack",
  "version": "1.0.0"
}

 

2,下载相关包

react:

 npm install react react-dom --save

babel:

npm install babel-core babel-preset-es2015 babel-preset-react --save-dev

 npm install babel-loader

 

3,webpack配置文件: webpack.config.js

创建这个文件,是webpack执行命令加载的文件

const path = require('path'); //path内置的模块,用来设置路径。

//暴露模块
module.exports = {
    entry: './src/js/main.js',   // 入口文件
    output: {                     // 输出配置
        filename: 'bundle.js',      // 输出文件名
        path: path.resolve(__dirname, 'dist')   //输出文件路径配置
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            //babel处理js
            {
                test: /\.js$/,
                exclude: /node_modules/, //排除此文件夹
                use: [
                    'babel-loader'
                ]
            }

        ]
    }
    
};

4,babel配置文件: .babelrc

创建一个.babelrc文件,这个文件指定用到babel的功能

{
  "presets": ["es2015", "react"]
}

5,下载css加载器

npm install style-loader css-loader --save-dev

 

 

编码

1,src/js/App.js: 应用组件

import React from 'react';

//定义组件
class App extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return(
            <div>App组件</div>
        )
    }
}

//es 6默认暴露,暴露App组件
export default App;

2,src/js/main.js: 入口js

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

import  App from './App';

import '../css/test.css'; //引入样式

ReactDOM.render(<App />,document.getElementById('container'));

3,创建css文件 src/css/test.css

body{
    background: red;
}

4,index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <div id="container"></div>

    <script type='text/javascript' src="dist/bundle.js"></script>
</body>
</html>

 

5,执行命令

webpack 打包

 

项目结构

 

 

效果

 

转载请注明:汪明鑫的个人博客 » 基于webpack开发React

喜欢 (0)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz