热门标签 | 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": []

}



推荐阅读
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法
    本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数,可以设置密码的有效期、最小间隔时间、最小长度,并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ... [详细]
  • web.py开发web 第八章 Formalchemy 服务端验证方法
    本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例,详细说明了对各字段的验证要求,包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]
  • 本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • C++字符字符串处理及字符集编码方案
    本文介绍了C++中字符字符串处理的问题,并详细解释了字符集编码方案,包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码,否则将使用windows code page编译。最后,给出了相关的头文件和数据类型定义。 ... [详细]
  • 本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序,实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包,解决了客户在安装软件时的复杂配置和繁琐问题,便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务,其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下,执行mysqld --install MySQL5命令。 ... [详细]
  • 深入理解Kafka服务端请求队列中请求的处理
    本文深入分析了Kafka服务端请求队列中请求的处理过程,详细介绍了请求的封装和放入请求队列的过程,以及处理请求的线程池的创建和容量设置。通过场景分析、图示说明和源码分析,帮助读者更好地理解Kafka服务端的工作原理。 ... [详细]
  • 本文介绍了如何清除Eclipse中SVN用户的设置。首先需要查看使用的SVN接口,然后根据接口类型找到相应的目录并删除相关文件。最后使用SVN更新或提交来应用更改。 ... [详细]
  • Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
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社区 版权所有