美文网首页
react中webpack配置

react中webpack配置

作者: 池池吴 | 来源:发表于2022-09-16 11:45 被阅读0次

    一、安装

    1.npm install webpack -g(以命令行工具的形式使用webpack时,在全局安装webpack)

    2.npm install webpack --save-dev(编写自己的构建脚本,或由项目指定需要依赖的webpack,本地安装,webpack只是构建工具的角色,应该安装在dev-dependencies中)

    3.npm install babel-core babel-loader --save-dev(添加加载器,将进行解析,以便浏览器使用.jsx和.scss等文件)

    二、webpack文件

    var path = require('path');// 用于拼接路径

    module.exports = {

     entry: path.resolve(__dirname, 'index.jsx'),// 指定项目入口

        // webpack打包后的js文件路径及名称

        output: {

            path: path.resolve(__dirname, 'build'),// 输出路径

            filename: '/js/[name].[chunkhash:8].js' // 输出的文件名

        },

        // 配置模块使用的加载器

        module: {

            loaders: [

            {

                // 假设我们拥有一个编译sass加载器

                // 匹配字符串

                test:/\.scss$/,

                // 使用的加载器,不可以省略加载器的后缀-loader

                loaders:['style-loader', 'css-loader', 'sass-loader']

            },

            {

                test:/\.jsx?$/,

                loaders: ['babel-loader']

            }

        },

        //配置webpack需要依赖的插件的地方

        plugins: [

            new HtmlWebPackPlugin({

                  template: "./src/index.html",//可以设置已哪个html文件为模版

                  filename: "./index.html"//可以设置html输出的路径和文件名

            }),

            new webpack.DefinePlugin({//最小化压缩 React

                  'process.env':{

                    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)

                  }

            }),

        ]

    }

    三、webpack配置中将将路径改为相对路径'./'

    如何使用@去取代相对路径呢?

    alias: {

      'react-native': 'react-native-web',

      '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理},

    在alias里面加入 '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理

    相关文章

      网友评论

          本文标题:react中webpack配置

          本文链接:https://www.haomeiwen.com/subject/fxmdnrtx.html