关于前端:从零配置webpack-react

42次阅读

共计 4231 个字符,预计需要花费 11 分钟才能阅读完成。

尽管说当初创立一个 react 我的项目,打包的配置都是曾经配置好了的,只须要咱们运行相应的打包命令就行了,然而咱们还是很有必要晓得该怎么来配置打包须要的配置。

上面就让咱们来走一遍 webpack 打包 react 我的项目的整个过程吧。

创立一个 React 我的项目

这里就不应用 create-react-app 指令创立 React 我的项目了,因为用 create-react-app 创立的我的项目,外面的配置曾经配置好了。

本文就间接应用 yarn init 初始化

并创立上面的目录构造:

装置 webpack

应用

yarn add webpack webpack-cli --dev

--dev 是部分装置的意思,为什么是部分装置呢?

因为并不是所有我的项目都须要应用 webpack,所以只须要在须要应用的我的项目外面装置就行了;

但最次要的起因还是,如果全局装置 webpack 的话,一个其余使用者在应用这个我的项目的时候,他的电脑没有全局装置 webpack,那么将运行不起来,但如果是部分装置的话,其余使用者只须要在开始 install 一次就行了。

应用 npx webpack -h查看是否装置胜利

因为是部分装置,因而 webpack 是在依赖包里的,对于它们命令的执行,要进入依赖包才行,否则是被认为命令有效的。或者,应用 npx 会主动找到对应的包执行命令,它是一个 npm 包执行器,个别装置了 npm 会主动装置 npx,总之,有了这个工具,执行部分的 webpack 命令就没那么简短了。

在根目录下增加 webpack.config.js 配置文件

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {path: path.resolve(__dirname, 'dist')
    }
}

应用 npx webpack对我的项目进行打包解决

能够在我的项目目录上面发现打包好的 dist文件夹

index.html文件中引入打包好的 dist 中的 main.js文件,并运行 index.html文件,能够在浏览器的控制台中看到打印了 hello world

咱们能够应用插件来生成 html 文件,这样就防止了 html 每次去手动引入js;应用插件来删除上次打包的后果。

// 装置依赖
yarn add --dev html-webpack-plugin clean-webpack-plugin

webpack.config.js中应用插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {path: path.resolve(__dirname, 'dist')
    },
    plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),
        new CleanWebpackPlugin()]
}


运行 dist 中的 index.html 文件

这里打印了两次,是因为原来在 public/index.html中引入了一次 main.js,打包的时候又引入了一次,所以一共引入了两次,所以打印了两次 hello world

更多对于 webpack 的配置阐明能够 webpack 官网

React 应用 webpack

根本配置

下载 reactreact-domreact-scripts

yarn add react react-dom react-scripts

批改 index.js文件,增加 App.js文件

package.json文件中退出:

"scripts": {"start": "react-scripts start"}

运行 yarn start …. 报错

发现是装置的 react 的包外面的 webpack和本人装置的 webpack包的版本抵触了

升高装置的 webpack包的版本:

删除 node_modulesyarn.lcok,批改 package.json外面 webpack的版本为 4.44.2

从新下载好后,cnpm start没问题!

然而应用 npx webpack,又报错!

查看一圈发现是 html-webpack-plugin插件版本问题。

yarn remove html-webpack-plugin

yarn add --dev html-webpack-plugin@^3.2.0

下载好之后运行 npx webpack

这是因为不反对 JSX 语法包的错,所以须要去配置 loader

去 babel 的官网,看看如何配置 jsx 语法 loader

下载

yarn add --dev @babel/preset-react babel-loader @babel/core

webpack.config.js退出 loader配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {path: path.resolve(__dirname, 'dist')
    },
    plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),
        new CleanWebpackPlugin()],
    module: {
        rules: [
            {test: /\.(js|jsx|ts|tsx)$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {presets: ['@babel/preset-react']
                        }
                    }
                ]
            }
        ]
    }
}

CSS 配置

持续配置 css须要的配置

创立 App.css文件,并引入

// App.js
import React, {PureComponent} from 'react';
import './App.css';

class App extends PureComponent{constructor(props){super(props);
        this.state = {};}

    render(){
        return (<div className='hello'>Hello World!</div>)
    }
}
export default App;
// App.css
.hello {color: red;}

下载 style-loadercss-loader,这里要特地留神 loader的版本问题,能够应用 npm ls style-loader 查看 react装置好了的 loader 是什么版本的(因为下载了 react-scripts,这个包外面也有打包性能,所以外面必定配置了 style-loader,css-loader这些 loader 的),咱们就装置多少版本的。

应用

yarn add --dev style-loader@1.3.0 css-loader@4.3.0

webpack.config.js 中退出配置

{
    test: /\.css$/i,
    use: ['style-loader', 'css-loader']
}

配置好后,npx webpack打包,运行 dist/index.html,发现 Hello World字体色彩为红色。

在控制台调试发现,css 款式的引入是在 head 插入的,当我的项目变大时款式直接插入 head 中的形式并不好,咱们须要将款式拆散

应用 mini-css-extract-plugin插件,它会将 CSS 提取到独自的文件中,为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件,并且反对 CSS 和 SourceMaps 的按需加载。

下载 mini-css-extract-plugin

yarn add --dev mini-css-extract-plugin@0.11.3

webpack.config.js配置 mini-css-extract-plugin

plugins: [
    ...
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
    })
]

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                    // you can specify a publicPath here
                    // by default it use publicPath in webpackOptions.output
                    publicPath: '../'
                    }
                },
                "css-loader"
            ]
        }
    ]
}


配置 img、font、map3 等资源的 loader

应用 url-loader,它的性能相似于 file-loader, 然而在文件大小(单位为字节)低于指定的限度时,能够返回一个 DataURL

yarn add --dev url-loader@4.1.1
// App.css
.hello {
    color: red;
    background: url('./assets/backgroud2.jpg') no-repeat center;
    background-size: cover;
    height: 100vh;
}

webpack.config.js增加配置

{test: /\.(jpg|png|gif)$/,
    loader: 'url-loader',
    options: {
        limit: 1000,
        name: 'static/img/[name].[hash:7].[ext]'
    }
}

运行 dist/index.html报如下谬误:

这是因为本地没有启动 web 服务,所以浏览器拜访不了本地的资源,这是失常的。

其余资源的配置和下面的差不多,这里就不做介绍了。

参考资料:

应用 webpack4 从零配置 react 我的项目

正文完
 0