webpack4.x从头配置react环境

最新推荐文章于 2024-07-30 18:16:48 发布

Vince｀Liang

最新推荐文章于 2024-07-30 18:16:48 发布

阅读量331

点赞数

文章标签： reactjs webpack 前端

本文链接：https://blog.csdn.net/weixin_43167459/article/details/105029811

版权

配置基本的webpack

新建一个文件夹，存放我们的项目，我这里使用命令行创建一个life文件夹存放我的项目

mkdir life

进入life目录，使用npm init -y命令来初始化webpack项目，加-y是运行该命令后的提示默认都为yes，不加也行。

cd life
//npm init
npm init -y

初始化后该目录下会出现一个package.json文件，这是对该项目的描述，里面的具体意思这里就不详细描述。

接着，新建一个src目录来存放开发的代码，新建一个dist目录来存放打包后的文件。

mkdir src
mkdir dist

在src目录下创建一个index.html，index.js(入口文件，在webpack4.x之后，约定index.js是默认的入口文件，直接新建一个index.js可以免除配置入口文件)
接着，运行命令npm install webpack webpack-cli -D来安装webpack、webpack-cli。
-D的意思是仅在开发环境下使用的包，webpack-cli是webpack命令行工具。

npm install webpack webpack-cli -D

这里注意，由于是局部安装的webpack，需要配置package.json文件使用npm运行webpack或者将webpack放进环境变量中，否者会报错，详见无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称…

接着，项目根目录下创建一个webpack.config.js文件，这是webpack的配置文件，至少需要配置一个mode，这里我先配置一个mode。

webpack.config.js

//向外暴露一个打包的配置对象，
//因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
	//webpack4.x中，mode是必须的
	//development(开发环境，不压缩代码)、production（生产环境，压缩代码）
    mode: 'development' 
}

到这里，基本的webpack就配置成功了，这时我们随便在index.js中输入一些js语句，然后在命令行输入webpack命令，就可以看到dist文件夹下有打包好的文件，我们在index.html中引入dist文件夹下打包好的文件，就可以看到效果了。

配置webpack-dev-server

上面只是最基本的webpack配置，当我们在开发的时候，修改了代码，如果只是上面的配置，我们需要重新打包构建才能看到效果，所以我们需要webpack-dev-server，它的作用就是热更新，安装了的话，当我们修改了代码之后，就可以直接在页面看到改变，而不需要重新打包。

首先，命令行运行npm install webpack-dev-server -D来安装该插件。

npm install webpack-dev-server -D

接着，在package.json文件中的scripts对象中添加"dev":"webpack-dev-server"，如下：

package.json

{
  "name": "life",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "注释":"基本配置就是webpack-dev-server， 后面--open是直接打开浏览器， --port 3000是使用3000端口打开啊，默认是8080端口，--hot是自动刷新页面",
    "dev": "webpack-dev-server --open --port 3000 --hot"
     
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

接着，我们命令行输入npm run dev，可以看到：

然后我们在浏览器中打开http://localhost:8080/可以看到

这个插件是在我们修改代码的时候，实时帮我们打包，它打包出了一个main.js文件，放在项目根目录下，注意，该插件打包出的文件是放在内存中的，我们看不到，但是我们可以直接在index.html文件中引入即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是首页
    <script src="/main.js"></script>
</body>
</html>

然后，这个时候我们修改代码的话，网页上进入src下的index.html文件，就可以实时看到效果了。
注意，关于webpack-dev-server，关于打包后的路径等很多配置都是可以自己配置的，这里就不具体展开了。

配置html-webpack-plugin

上面做的配置当我们运行npm run dev时只能在网页打开项目结构，还需要进入src，以及需要手动引入webpack-dev-server打包好的文件，如果不想做这些操作，还需要安装html-webpack-plugin。

命令行运行npm install html-webpack-plugin -D安装该插件

npm install html-webpack-plugin -D

配置webpack.config.js文件

webpack.config.js


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlwebpackplugin = new HtmlWebPackPlugin({
    template:path.join(__dirname, './src/index.html'), //源文件
    filename:'index.html' //打包好的文件名
})



//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
    mode: 'development', //development(开发环境)、production（生产环境）
    plugins:[
        htmlwebpackplugin
    ]
}

接下来，再运行npm run dev就可以直接在浏览器打开首页了，也不需要再在index.html文件中引入了。
注意，这只是关于该插件最基本的配置，具体的可以网上找，很多，这里就不展开了。

安装React

命令行运行下面命令

 npm install react react-dom -S

安装并配置babel插件

babel插件可以帮我们转化jsx代码以及es6代码。
命令行运行下面两条命令：

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react -D
npm install @babel/preset-env -D

接着，在webpack.config.json文件中配置module，如下：


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlwebpackplugin = new HtmlWebPackPlugin({
    template:path.join(__dirname, './src/index.html'), //源文件
    filename:'index.html' //打包好的文件名
})



//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
    mode: 'development', //development(开发环境)、production（生产环境）
    plugins:[
        htmlwebpackplugin
    ],
    module:{
        rules:[
            {test:/\.js|jsx$/, use:'babel-loader', exclude:/node_modules/}
        ]
    }
}

接着，项目根目录新建一个.babelrc文件，添加如下配置内容：

{
    "presets":["@babel/preset-env", "@babel/preset-react"],
    "plugins":["@babel/plugin-transform-runtime"]
}

接着，在入口文件index.js中：

index.js：

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

import App from './app.jsx'

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

然后，index.js同级目录下，新建一个app.jsx文件，如下：

app.jsx:

import React from 'react'
class App extends React.Component{
    constructor(){
        super()
    }
    render(){
        return <div>Hello World!</div>
    }
}
export default App

最后，在项目根目录下运行命令npm run dev，就可以看到页面效果了

注意，如果想在引入时不写文件后缀名，以及用@代替src的路径，可以修改webpack.config.js配置文件，添加resolve对象，如下：

webpack.config.js


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlwebpackplugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'), //源文件
    filename: 'index.html' //打包好的文件名
})



//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
    mode: 'development', //development(开发环境)、production（生产环境）
    plugins: [
        htmlwebpackplugin
    ],
    module: {
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], //默认补全.js, .json, 这几个后缀名可以不写
        alias:{
            '@':path.join(__dirname, './src') //用@代替src目录
        }
    }
}

修改配置文件后重新启动项目即可看到应用。

处理css样式表文件

npm install style-loader css-loader -D

webpack.config.js配置文件中，rules数组添加一项处理css文件，如下：

webpack.config.js


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlwebpackplugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'), //源文件
    filename: 'index.html' //打包好的文件名
})



//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
    mode: 'development', //development(开发环境)、production（生产环境）
    plugins: [
        htmlwebpackplugin
    ],
    module: {
        rules: [
            //处理js， jsx文件
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            //处理css文件，注意style-loader，css-loader的顺序在此处不能乱
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], //默认补全.js, .json, 这几个后缀名可以不写
        alias: {
            '@': path.join(__dirname, './src') //用@代替src目录
        }
    }
}

现在可以在项目中新建一个css文件，然后在你想用的地方使用import引入，就可以使用了。

配置解决css作用域冲突的问题

上面的配置中，虽然可以使用css了，但是由于css的作用域是全局的，往往会导致样式冲突，所以我们要通过配置，来为css文件配置作用域。

首先，修改刚才的css的处理规则，为其启用模块化，如下：
webpack.config.js


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlwebpackplugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'), //源文件
    filename: 'index.html' //打包好的文件名
})



//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
    mode: 'development', //development(开发环境)、production（生产环境）
    plugins: [
        htmlwebpackplugin
    ],
    module: {
        rules: [
            //处理js， jsx文件
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            //处理css文件，注意style-loader，css-loader的顺序在此处不能乱
            //添加modules启用模块化
            { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], //默认补全.js, .json, 这几个后缀名可以不写
        alias: {
            '@': path.join(__dirname, './src') //用@代替src目录
        }
    }
}

css文件如下：
common.css

.test {
    font-size:12px;
}

在使用的地方引入并且使用，如下：
app.jsx:

import React from 'react'
import Index from '@/components/index'
import CSS from '@/common/common.css'
class App extends React.Component {
    constructor() {
        super()
    }
    render() {
        return (<div>
            <div className={CSS.title}>Hello World</div>
            <Index></Index>
        </div>)
    }
}
export default App

即可使CSS文件有单独的作用域，但是，只会对类选择器和id选择器生效。

对于模块化CSS，有下面两个方法：
1、运用global()方法，可以使类名不模块化，也就是，在css文件中可以：
:global(.test) { font-size:12px; }，这样，test类不会被模块化。
2、运用local()方法可以防止不被模块化，也就是模块化类名，默认是使用的，所以可以不写，用法：:local(.test) { font-size:12px; }

处理图片

npm install url-loader -D

在webpack配置文件webpack.config.js的rules下添加一项来处理图片：
webpack.config.js:


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlwebpackplugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'), //源文件
    filename: 'index.html' //打包好的文件名
})



//向外暴露一个打包的配置对象，因为webpack是基于node构建的，所以支持node API的语法
module.exports = {
    mode: 'development', //development(开发环境)、production（生产环境）
    plugins: [
        htmlwebpackplugin
    ],
    module: {
        rules: [
            //处理js， jsx文件
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            //处理css文件，注意style-loader，css-loader的顺序在此处不能乱
            //添加modules启用模块化
            { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] },
            //处理图片
            {
                test: /\.(jpg|png|gif)/, use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //图片打包到打包文件夹的images文件夹下
                            outputPath:'images'
                        }
                    },

                ]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], //默认补全.js, .json, 这几个后缀名可以不写
        alias: {
            '@': path.join(__dirname, './src') //用@代替src目录
        }
    }
}

jsx文件中使用

import React from 'react'
import Index from '@/components/index'
import CSS from '@/common/common.css'
//引入图片
import img from '@/common/img/ttt.jpg'
const i = 'http://img1.imgtn.bdimg.com/it/u=3958338326,3419435331&fm=15&gp=0.jpg'
class App extends React.Component {
    constructor() {
        super()
    }
    render() {
        return (<div>
            <div className={CSS.title}>Hello World</div>
            <Index></Index>
            {/* 使用图片 */}
            <img src = {img}></img>
            <img src={i} alt=""/>
        </div>)
    }
}
export default App

这样，就可以使用图片了。

至此，一个简单的webpack+react开发环境就搭建完毕了~~~

Vince｀Liang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack4.x从头配置react环境

新建一个文件夹，存放我们的项目，我这里使用命令行创建一个life文件夹存放我的项目mkdir life进入life目录，使用npm init -y命令来初始化webpack项目，加-y是运行该命令后的提示默认都为yes，不加也行。cd lifenpm init -y (npm init)初始化后该目录下会出现一个package.json文件，这是对该项目的描述，里面的具体意思...
复制链接

扫一扫