[webpack] webpack 从入门到 所有

Posted 2022-11-28 haliofwu

官网地址

webpack中文

以server.js为接入点:

'use strict';
require('core-js/fn/object/assign');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');
const open = require('open');

/**
 * Flag indicating whether webpack compiled for the first time.
 * @type boolean
 */
let isInitialCompilation = true;

const compiler = webpack(config);



new WebpackDevServer(compiler, config.devServer)
.listen(8080, '0.0.0.0', (err) => 
  if (err) 
    console.log(err);
  
  console.log('Listening at localhost:' + 8080);
);

compiler.plugin('done', () => 
  if (isInitialCompilation)     
  
  isInitialCompilation = false;
);

上述代码以node server.js启动程序.

1) webpack工作机制

2) webpack-dev-server使用方法
用途:webpack-dev-server是一个小型的nodejs express服务器,主要用来提供webpack 的bundle文件.可实现自动刷新,和模式热替换机制.
参考文章: 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

webpack打包和webpack-dev-server开启服务的区别:
webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中,不输出真实的文件！
只是webpack打包时,我们能在入口index.html中看到对bundle.js的引用,并能找到该引用目录下的bundle.js文件.在webpack-dev-server输出的项目中,也有对bundle.js的引用,但找不到对应的真实文件.

具体的配置项参考:webpack doc

3)总体使用

webpack.config.js

const path = require('path');
const args = require('minimist')(process.argv.slice(2));//通过启动的命令行,获取开发环境/生产环境

const allowedEnvs = ['dev', 'dist', 'test'];

let env;
if (args._.length > 0 && args._.indexOf('start') !== -1) 
  env = 'test';
 else if (args.env) 
  env = args.env;
 else 
  env = 'dev';

process.env.REACT_WEBPACK_ENV = env;

function buildConfig(wantedEnv) 
  let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
  let validEnv = isValid ? wantedEnv : 'dev';
  let config = require(path.join(__dirname, 'cfg/' + validEnv));
  return config;


module.exports = buildConfig(env);

webpack-dev-server.js:

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

const compiler = webpack(config);
let server = new WebpackDevServer(compiler, config.devServer);//devServer是webpack-dev-server的配置项,可以设置在config中,也可以单独拿出来;
server.listen(8080, '0.0.0.0', (err) => );

启动:

node webpack-dev-server.js

升级: 常用的插件.
1) case-sensitive-paths-webpack-plugin

强制执行所有必须模块的整个路径，匹配磁盘上实际路径的确切大小写。意味着可以忽略大小写的问题，避免大小写问题引起的麻烦。有时你会发现 Mac 上 webpack 编译没有问题，但是到 linux 机器上就不行了，这是因为 Mac 系统是大小写不敏感 的，避免的办法是使用 case-sensitive-paths-webpack-plugin 模块：

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')

plugins:[
    new CaseSensitivePathsPlugin(
      debug: false
    )
]

2) copy-webpack-plugin

把需要的文件或者整个目录 拷贝到 build 之后的目录下

plugins: [
        new CopyWebpackPlugin([
            // output/file.txt
             from: 'from/file.txt' ,

            // equivalent
            'from/file.txt',

            // output/to/file.txt
             from: 'from/file.txt', to: 'to/file.txt' 
            ])
         ]

3) const WatchMissingNodeModulesPlugin = require(‘react-dev-utils/WatchMissingNodeModulesPlugin’);

当npm install xx时,强制项目重新build.

new WatchMissingNodeModulesPlugin();

4) system-bell-webpack-plugin

在失败时让系统响铃（emmm，或许挺有意思的），而不是默默失败

new SystemBellWebpackPlugin(),

5) autoprefixer

-webkit- 給 Chrome 及 Safari 的前綴
-moz- 給 Firefox 的前綴
-ms- 給 IE 的前綴
自动帮助你把css的语法编译成所有浏览器都支持的形式

a
display: flex


转为:
 a
     display: -webkit-box;
     display: -weblit-flex;
     display: -ms-flexbox;
     display: flex;
 

设定:

以下的设定意思是, 包含所有使用率大于1%, 最新的4个版本的浏览器, Firefox延长支持版本,不包括ie9以下的版本.这些浏览器都要自动prefix.

 autoprefixer(
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
          ),

具体的配置项
1) devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度

const config = 
  devtool: '#cheap-module-eval-source-map',
  

2)entry

entry 对象是用于 webpack 查找启动并构建 bundle

to be continue…