react-webpack

2022-06-20 本文已影响0人 spfi

1、安装webpakck

npm install --save-dev webpack webpack-cli

刚刚安装的版本是 5.73.0

2、新建config配置文件夹

在根目录下创建一个webpack.config文件夹，在此文件夹下创建三个配置文件

webpack.common.config.js -- 公共配置文件
webpack.prod.config.js -- 生产环境配置文件
webapck.dev.config.js -- 开发环境配置文件

在根目录下再创建一个src文件夹，新建 app.js文件

3、在webpack.common.config.js文件中输入以下代码

const path = require('path');

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

4、安装webpack-merge

用于合并webpack配置

npm install --save-dev webpack-merge

5、配置开发环境，生产环境webpack

const path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },

    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, '../dist')
    }
}

6、安装React

npm install --save react react-dom

7、修改app.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>my-project!!!!!</div>
    );
  }
}

export default App;

8、在src下新增index.js，代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';

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

9、修改webpack.common.js配置文件入口为：index.js

10、安装bable

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime

各个bable的作用：

babel-loader：使用 Babel 和 webpack 来转译 JavaScript 文件。
@babel/core：babel 的核心模块
@babel/preset-env：转译 ES2015+的语法
@babel/preset-react：转译 react 的 JSX
@babel/plugin-proposal-class-properties：用来编译类(class)
@babel/plugin-transform-runtime：防止污染全局，代码复用和减少打包体积

11、在webpack.common.js加入bable配置

const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js'
    },

    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: [
                            '@babel/plugin-transform-runtime',
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            }
        ]
    }
}

12、安装HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

13、配置webpack.config.js

const { merge } = require('webpack-merge');

const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            inject: 'body',
            minify: {
                removeComments: true
            }
        })
    ]
})

template：基于我们自己定义的 html 文件为模板生成 html 文件
filename：打包之后的 html 文件名字
inject：将 js 文件注入到 body 最底部
minify：压缩 html 文件时的配置
removeComments：去除注释

14、生成文件添加hash值

    output: {
        filename: 'js/[name]-bundle-[hash:8].js',
        path: path.resolve(__dirname, '../dist')
    }

[name] 打包入口名称
[hash] 哈希串默认长度为 20，:6 为取前六位

15、打包前清理dist目录（新版本可以不引入插件）

npm install --save-dev clean-webpack-plugin

代码如下：

const { merge } = require('webpack-merge');

const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            inject: 'body',
            minify: {
                removeComments: true
            }
        }),
        new CleanWebpackPlugin()
    ]
})

注意：新版可配置output对象属性clean为true，来清理

16、安装webpack-dev-server

npm install -D webpack-dev-server

修改webpack.dev.js

const { merge } = require('webpack-merge');
const path = require('path')
const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        // 新版本不再支持contentBase，而是使用static，路径指定有问题
        // contentBase: path.join(__dirname, 'dist'),
        prot: 8888,
        compress: true，
        static: {
           directory: path.join(__dirname, '/public')
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            inject: 'body',
            hash: false
        })
    ]
})

contentBase: 启服务的文件
port: 端口号
compress: 为每个静态文件开启[gzip压缩]

17、样式配置

安装style-loader、css-loader

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

新增配置

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

18、打包css

安装插件

npm i -D mini-css-extract-plugin

配置打包

  module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },

在插件里面新增配置

 new MiniCssExtractPlugin({
     filename: 'style/[name].[hash].css'
 })

19、压缩打包出来的css文件

安装依赖

npm i -D css-minimizer-webpack-plugin

配置压缩

    optimization: {
        minimize: true,
        minimizer: [new CssMinizerPlugin()]
    },

20、配置less、sass

安装依赖

npm i less less-loader -D
npm i -D sass sass-loader node-sass

配置less，sass

           {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }

21、压缩js代码

下载插件

npm i -D terser-webpack-plugin

配置压缩文件

    optimization: {
        minimize: true,
        minimizer: [
            new CssMinizerPlugin(),
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true
                    }
                }
            })
        ]
    },

22、配置css浏览器前缀

安装依赖

npm i -D postcss postcss-loader autoprefixer

在根目录，新增postcss.config.js文件，代码如下：

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
                'Android 4.1',
                'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8',
            ]
        })
    ]
};

在css-loader后面新加postcss-loader

23、配置图片load，使用url-loader

安装url-loader，url-loader依赖于file-loader，所以需要安装两个loader

npm i -D file-loader url-loader

配置代码

            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images',
                    limit: 8192
                }
            }

后缀为 jpg,png,gif 的文件，使用 url-loader 进行预处理；
options 中的[name].[ext]表示，输出的文件名为原来的文件名；
outputPath 是输出到 dist 目录下的路径，即 dist/images；
limit: 8192，指定文件的最大体积（以字节为单位）。如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有参数传递给它。若是小于了 8kb，将图片打包成 base64 的图片格式插入到 bundle.js 文件中，这样做的好处是，减少了 http 请求，但是如果文件过大，js 文件也会过大，得不偿失，这是为什么有 limit 的原因。

24、配置source-map

devtool: 'eval-cheap-module-source-map',

25、配置resolve.alias

 resolve: {
        extensions: ['.js', '.jsx', '.json', '.less', '.scss'],
        modules: [ path.resolve(__dirname, '../src'), 'node_modules' ],
        alias: {
          '@': path.join(__dirname, '../src')
        }
      }

extensions: 如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件并跳过其余的后缀。使用此选项会覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。
modules: 如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索。
alias: 创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块

react-webpack

1、安装webpakck

2、新建config配置文件夹

3、在webpack.common.config.js文件中输入以下代码

4、安装webpack-merge

5、配置开发环境，生产环境webpack

6、安装React

7、修改app.js

8、在src下新增index.js，代码如下

9、修改webpack.common.js配置文件入口为：index.js

10、安装bable

各个bable的作用：

11、在webpack.common.js加入bable配置

12、安装HtmlWebpackPlugin

13、配置webpack.config.js

14、生成文件添加hash值

15、打包前清理dist目录（新版本可以不引入插件）

16、安装webpack-dev-server

17、样式配置

18、打包css

19、压缩打包出来的css文件

20、配置less、sass

21、压缩js代码

22、配置css浏览器前缀

23、配置图片load，使用url-loader

24、配置source-map

25、配置resolve.alias

猜你喜欢

热点阅读