webpack部分配置解析

约定不等于承诺〃 2022-06-17 00:23 245阅读 0赞

var webpack = require('webpack');
     2 var path = require("path");
     3 module.exports = {
     4     // context: __dirname + "/src",//The base directory (absolute path!)
     5     // 表示入口文件
     6     cache: true,
     7     entry: {
     8         'bundle': './src',
     9         // 'app2': '/src/app2'
    10     },
    11     minimize: true,
    12     // 表示输出文件
    13     output: {
    14         path: path.join(__dirname, "build"),// 编译好的文件目录
    15         filename: '[name].min.js',
    16         chunkFilename: "[chunkhash].min.js"
    17         // sourceMapFilename: '[file].map'
    18         // publicPath: "/build/" // 引用你的文件时考虑使用的地址
    19     },
    20     // 表示这个依赖项是外部lib，遇到require它不需要编译，
    21     // 且在浏览器端对应window.React
    22     externals: [
    23         {
    24             'react': 'window.React',
    25             'react-bootstrap': 'window.ReactBootstrap',
    26             'jquery': 'window.jQuery'
    27         }
    28     ],
    29 
    30     module: {
    31         loaders: [
    32             // 凡是遇到jsx结尾的，都用jsx-loader这个插件来加载，
    33             // 且启用harmony模式
    34             //{ test: path.join(__dirname, 'es6'), loader: 'babel-loader' },'jsx-loader?harmony'
    35             { test: /\.js$/, loader: 'babel-loader!jsx-loader?harmony' },
    36             { test: /\.jsx$/, loader: "jsx-loader?insertPragma=React.DOM" },
    37             { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
    38             { test: /\.css$/, loader: 'style-loader!css-loader' },
    39             { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
    40 
    41             // required for bootstrap icons
    42             { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
    43             { test: /\.ttf$/, loader: "file-loader?prefix=font/" },
    44             { test: /\.eot$/, loader: "file-loader?prefix=font/" },
    45             { test: /\.svg$/, loader: "file-loader?prefix=font/" }
    46 
    47         ]
    48     },
    49     resolve: {
    50         // 现在可以写 require('file') 代替 require('file.coffee')
    51         extensions: ['', '.webpack.js', '.coffee', '.json', '.js', '.jsx'],
    52         modulesDirectories: [
    53             'node_modules',
    54             'bower_components',
    55             'lib',
    56             'src'
    57         ]
    58         // alias: {
       
    59         //     // Bind version of jquery
    60         //     jquery: "jquery-2.0.3",
    61 
    62         //     // Bind version of jquery-ui
    63         //     "jquery-ui": "jquery-ui-1.10.3",
    64 
    65         //     // jquery-ui doesn't contain a index file
    66         //     // bind module to the complete module
    67         //     "jquery-ui-1.10.3$": "jquery-ui-1.10.3/ui/jquery-ui.js",
    68         // }
    69     },
    70     devtool: 'source-map',
    71     plugins: [
    72         new webpack.DefinePlugin({
      // definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
    73             __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
    74             __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
    75         }),
    76         new webpack.optimize.UglifyJsPlugin(),
    77         new webpack.optimize.CommonsChunkPlugin('common.min.js', 5),
    78         new webpack.ProvidePlugin({
    79             // Automtically detect jQuery and $ as free var in modules
    80             // and inject the jquery library
    81             // This is required by many jquery plugins
    82             $: "jquery",
    83             jQuery: "jquery",
    84             "window.jQuery": "jquery"
    85         })
    86     ]
    87 };

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack HMR 原理全解析

> 这是 Webpack 原理分析系列第十篇文章，前文可到公众号【Tecvan】查阅。一、什么是 HMR HMR 全称 Hot Module Replacement，

素颜马尾好姑娘i/ 2022年09月11日 09:16/ 0 赞/ 264 阅读

相关 SpringMvｃ的配置文件部分解析

今天写毕业设计用SpringMVｃ又重新发现了一些问题，很基础，希望对基础薄弱的同学有帮助。 <servlet> <servlet-name>Spring

不念不忘少年蓝@/ 2022年06月18日 09:42/ 0 赞/ 214 阅读

相关 webpack详细配置解析

阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑

r囧r小猫/ 2022年06月17日 01:27/ 1 赞/ 328 阅读

相关 webpack部分配置解析

var webpack = require('webpack'); 2 var path = require("path"); 3 module.e

约定不等于承诺〃/ 2022年06月17日 00:23/ 0 赞/ 246 阅读

相关 webpack 源码解析

webpack 源码解析序言项目上在使用webpack，感叹真是神器，既然是神器，就想探知究竟。总览 webpack整体是一个插件架构，所有的功能都以

青旅半醒/ 2022年06月02日 09:20/ 0 赞/ 403 阅读

相关 pm2配置文件部分参数解析

首先，在项目根目录新建一个pm2.json文件，然后在文件中写入： { "apps": [ { "name": "mstore",

今天药忘吃喽~/ 2022年05月31日 14:27/ 0 赞/ 455 阅读

相关 encache 配置解析

<defaultCache>指默认使用的缓存

刺骨的言语ヽ痛彻心扉/ 2022年05月13日 03:20/ 0 赞/ 228 阅读

相关 webpack面试部分

Webpack面试问题 1、webpack打包原理把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。 2、webpack的优势

末蓝、/ 2022年03月25日 03:09/ 0 赞/ 250 阅读

相关 RefineDet：（2）检测部分网络解析

代码地址：[RefineDet][] 相关链接： 1. [《RefineDet：Single-Shot Refinement Neural Network for Obj

ゝ一纸荒年。/ 2022年02月03日 07:01/ 0 赞/ 204 阅读

相关 Mybatis配置解析

目录一核心配置文件二环境配置（environments）三属性（properties）四别名五设置六映射器 ---------------

墨蓝/ 2021年07月25日 02:48/ 0 赞/ 464 阅读