(精华)2020年7月10日 webpack webpack基础配置详解

"scripts": {
  "build":"rimraf dist && webpack --config webpack.config.js --mode production",
  "dev": "webpack-dev-server --config webpack.config.js"
}

  

 

  
1
  
2
  
3
  
4
 

var webpack = require('webpack');
var path = require('path');
var glob = require("glob");

var DIST_PATH = path.resolve(__dirname, './dist');

//入口文件
var SRC_PATH = path.resolve(__dirname, './src');
var newEntries = {};

// var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
var files = glob.sync(SRC_PATH + '/*.js'); //方式二
files.forEach(function (file, index) {
  // var substr =  file.split('/').pop().split('.')[0];
  var substr = file.match(/src\/(\S*)\.js/)[1];
  newEntries[substr] = file;
  // [\s]---表示，只要出现空白就匹配；
  // [\S]---表示，非空白就匹配；
})

// 声明/dist的路径 为成绝对路径
module.exports = {
  // 入口JS路径 的多种处理方式
  // 指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始 
  // entry: path.resolve(__dirname,'./src/index.js'), 
  // 支持单文件，多文件打包
  // entry: './src/index.js',   //方式一
  // entry: ['./src/index.js','./src/main.js'], //方法二
  // entry: {
  //     index:'./src/index.js',
  //     main:'./src/main.js'
  //  },
  entry: newEntries,
  // 编译输出的JS入路径 
  // 告诉Webpack在哪里输出它所创建的bundle，以及如何命名这些文件 
  output: {
    path: DIST_PATH, // 创建的bundle生成到哪里
    filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
  },
  // 模块解析 
  module: {},
  // 插件
  plugins: [],
  // 开发服务器 
  devServer: {
  	headers :{},//在所有响应中添加首部内容
  	https：true  //默认情况下，dev-server 通过 HTTP 提供服务。也可以选择	带有 HTTPS 的 HTTP/2 提供服务
	Info: true //是否要输出一些打包信息
    clientLogLevel:"none",//日志层级
    hot: true, // 热更新，无需手动刷新 
    contentBase: DIST_PATH, //热启动文件所指向的文件路径
    compress:true, //是否启用gzip压缩
    host: '0.0.0.0', // host地址 
    port: 8080, // 服务器端口 
    historyApiFallback: true, // 该选项的作用所用404都连接到index.html 
    // 代理到后端的服务地址，会拦截所有以api开头的请求地址
    proxy: {
      "/api": "http://localhost:3000",
      //pathRewrite: {"^/api" : ""}  //路径重写
    },
    useLocalIp: true,//用本地ip
    open: true,//自动打开浏览器
    noInfo: true//noInfo启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
    //启动后除了启动信息都不会显示
    progress ：true,将运行进度输出到控制台
	publicPath ： "",//此路径下的打包文件可在浏览器中访问，默认 
	watchContentBase：true  //告诉服务器监视devserver.contentbase选项提供的文件。文件更改将触发整页重新加载

    /*
    * quit:true,
    * */
    //可以接受一个app对象（express）处理一些请求
    // setup(app){
    //     app.get('/some/path', function(req, res) {
    //         res.json({ custom: 'response' });
    //     });
    // },
  }
}


  

 

  
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
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107271610