热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何改成webpack3的配置?

我想把下面这两端改成webpack3的配置,处理jsx文件

我想把下面这两端改成webpack3的配置,处理jsx文件

1
babel-loader

配置放在

1
.babelrc

里面,请问如何处理?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{

    test: /\.js$/,

    exclude: /(node_modules|bower_components)/,

    loaders: [

        'react-hot-loader', // react 热替换

        'babel-loader' // .babelrc 具体配置文件

    ]

},

{

    test:/\.jsx?$/,

    exclude:/node_modules/,

    loader:'babel-loader',

    query:{

        presets:['env', 'react', 'stage-0']

    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');// 热加载需要的 webpack

let ExtractTextPlugin = require("extract-text-webpack-plugin");



// the path(s) that should be cleaned

let pathsToClean = [

    'dist',

    'static'

]



// the clean options to use

let cleanOptiOns= {

    root:     '/static',

    // exclude:  ['*.html'],

    verbose:  true,

    dry:      false

}



let cOnfig= {

    /*

    entry: {

        index: './src/index.js',

        vendor: [

            'lodash'

        ]

    },

    */

    entry: {},

    module: {

        rules: [

            {

                test: /\.css$/,

                use: ['style-loader', 'css-loader']

            },

            { // 解析less文件,把less解析成浏览器可以识别的css语言

                test: /.less$/,

                use: ['style-loader', 'css-loader', 'less-loader']

            },

            {

                test: /\.js$/,

                exclude: /(node_modules|bower_components)/,

                loaders: [

                    'react-hot-loader', // react 热替换

                    'babel-loader' // .babelrc 具体配置文件

                ]

            },

            {

                test:/\.jsx?$/,

                exclude:/node_modules/,

                loader:'babel-loader',

                query:{

                    presets:['env', 'react', 'stage-0']

                }

            }

        ]

    },

    plugins: [

        // new CleanWebpackPlugin(['static']),

        new CleanWebpackPlugin(pathsToClean, cleanOptions),

        new webpack.HotModuleReplacementPlugin(), // 热加载的插件,使用缓存时请注释

        new webpack.optimize.CommonsChunkPlugin({

            name: 'vendor'

        }),

        new webpack.optimize.CommonsChunkPlugin({

            name: 'runtime'

        }),

        new ExtractTextPlugin({

            filename: 'styles/[name].css'

        }),

        new webpack.ProvidePlugin({ // 将 $ 变量挂载到 window 下面,可以在项目中直接使用 $ 不用再引用

            $:"jquery",

            jQuery:"jquery",

            "window.jQuery":"jquery"

        })

    ],

    // 通过 output.filename 和 output.path 属性,来告诉 webpack bundle(捆)的名称,以及我们想要生成(emit)到哪里

    output: {

        filename: '[name].bundle.js',

        // filename: '[name].[chunkhash].js',

        path: path.resolve(__dirname, 'static')

    },

    externals: {



    }

};





// 页面入口处理



let entry = {

    index: './src/index.js',

    vendor: [

        'jquery',

        'lodash'

    ]

};



config.entry = entry;



module.exports = config;


修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');// 热加载需要的 webpack

let ExtractTextPlugin = require("extract-text-webpack-plugin");



// the path(s) that should be cleaned

let pathsToClean = [

    'dist',

    'static'

]



// the clean options to use

let cleanOptiOns= {

    root:     '/static',

    // exclude:  ['*.html'],

    verbose:  true,

    dry:      false

}



let cOnfig= {

    /*

    entry: {

        index: './src/index.js',

        vendor: [

            'lodash'

        ]

    },

    */

    entry: {},

    // Rule.loader is a shortcut to Rule.use: [ { loader } ]

    // Rule.options and Rule.query are shortcuts to Rule.use: [ { options } ]

    module: {

        rules: [

            {

                test: /\.css$/,

                use: ['style-loader', 'css-loader']

            },

            { // 解析less文件,把less解析成浏览器可以识别的css语言

                test: /.less$/,

                use: ['style-loader', 'css-loader', 'less-loader']

            },

            {

                test: /\.js$/,

                exclude: /(node_modules|bower_components)/,

                loaders: [

                    'react-hot-loader', // react 热替换

                    'babel-loader' // .babelrc 具体配置文件

                ]

            },

            {

                test:/\.jsx?$/,

                exclude:/node_modules/,

                /*

                loader:'babel-loader',

                query:{

                    presets:['env', 'react', 'stage-0']

                }

                */

                loader:'babel-loader'

            }

        ]

    },

    plugins: [

        // new CleanWebpackPlugin(['static']),

        new CleanWebpackPlugin(pathsToClean, cleanOptions),

        new webpack.HotModuleReplacementPlugin(), // 热加载的插件,使用缓存时请注释

        new webpack.optimize.CommonsChunkPlugin({

            name: 'vendor'

        }),

        new webpack.optimize.CommonsChunkPlugin({

            name: 'runtime'

        }),

        new ExtractTextPlugin({

            filename: 'styles/[name].css'

        }),

        new webpack.ProvidePlugin({ // 将 $ 变量挂载到 window 下面,可以在项目中直接使用 $ 不用再引用

            $:"jquery",

            jQuery:"jquery",

            "window.jQuery":"jquery"

        })

    ],

    // 通过 output.filename 和 output.path 属性,来告诉 webpack bundle(捆)的名称,以及我们想要生成(emit)到哪里

    output: {

        filename: '[name].bundle.js',

        // filename: '[name].[chunkhash].js',

        path: path.resolve(__dirname, 'static')

    },

    externals: {



    }

};





// 页面入口处理



let entry = {

    index: './src/index.js',

    vendor: [

        'jquery',

        'lodash'

    ]

};



config.entry = entry;



module.exports = config;

1
2
3
4
{

  "presets": ["env", "react", "stage-0"],

  "plugins": []

}



推荐阅读
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 本文介绍了iOS数据库Sqlite的SQL语句分类和常见约束关键字。SQL语句分为DDL、DML和DQL三种类型,其中DDL语句用于定义、删除和修改数据表,关键字包括create、drop和alter。常见约束关键字包括if not exists、if exists、primary key、autoincrement、not null和default。此外,还介绍了常见的数据库数据类型,包括integer、text和real。 ... [详细]
  • 本文讨论了在dva中引入antd组件table时没有显示样式的问题。提供了.roadhogrc文件的配置,包括环境和import的设置。同时介绍了extraBabelPlugins和transform-runtime的使用方法,并解释了libraryName和css的含义。 ... [详细]
author-avatar
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有