正文

[webpack]webpack从入门到所有

haliofwu  haliofwu  2022-12-09  188

关键词：

官网地址

以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…

webpack从入门到上线

webpack是目前一个很热门的前端打包工具，官网说得很清楚，webpack的出现就是要把requirejs干掉。同时它还提供了十分便利的本地开发的环境。网上并不容易找到一个讲解得比较详细完整的教程，本文结合实践经验，总结一套可用... 查看详情

webpack从入门到上线

vuevuejs从入门到精通-webpack详解(代码片段)

...bao.org，可以加速npminstall速度MAC下安装需要sudonpminstallwebpack@3.6.0-g 查看详情

webpack入门教程

1.官方网站： https://doc.webpack-china.org/ 2.简单介绍：webpack是一个现代JavaScript应用程序的模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要... 查看详情

从 Webpack 3 迁移到 Webpack 4

】从Webpack3迁移到Webpack4【英文标题】：MigratingtoWebpack4fromWebpack3【发布时间】：2019-02-2601:46:06【问题描述】：我正在尝试迁移到Webpack4，但这真的很痛苦。经过几天努力将Webpack3插件迁移到Webpack4原生的东西上，我得到了js应该可... 查看详情

webpack入门教程(代码片段)

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。本章节基于Webpack3.0测试通过。从图中我们可以看出，Webpack可以将多种静态资源js、css... 查看详情

webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程(代码片段)

目录webpackwebpack的基本使用安装配置修改自定义打包的入口与出口优化js或图片的存放路径配置webpack中@符号的使用webpack中相关插件安装webpack-dev-serverhtml-webpack-pluginclean-webpack-pluginwebpack中的loader打包处理css文件打包处理less文... 查看详情

Webpack：从条目和子块中提取公共模块以分离公共块

】Webpack：从条目和子块中提取公共模块以分离公共块【英文标题】：Webpack:extractcommonmodulesfromentryandchildchunkstoseparatecommonschunk【发布时间】：2018-05-2114:45:11【问题描述】：我有一个使用代码拆分的webpack构建的应用程序。我现在想... 查看详情

React/Webpack - 从 webpack 1 迁移到 4，配置对象无效

】React/Webpack-从webpack1迁移到4，配置对象无效【英文标题】：React/Webpack-Migratefromwebpack1to4,Invalidconfigurationobject【发布时间】：2019-09-1108:43:34【问题描述】：已经有一个帖子和我有类似的问题，但它的解决方案对我没有帮助：Webpack... 查看详情

Angular Webpack 设置：使用 webpack 从 css 迁移到 sass

】AngularWebpack设置：使用webpack从css迁移到sass【英文标题】：AngularWebpacksetup:Migratefromcsstosassusingwebpack【发布时间】：2019-01-0411:49:23【问题描述】：我担心这个问题可能过于宽泛，但我希望在我的webpack设置方面得到一些帮助。我有... 查看详情

webpack快速入门——插件配置：html文件的发布

1.把dist中的index.html复制到src目录中，并去掉我们引入的js2.在webpack.config.js中引入consthtmlPlugin=require(‘html-webpack-plugin‘);3.引入后进行安装 cnpmi html-webpack-plugin--save-dev4.在webpack.config.js中进行插件配置newhtmlPl 查看详情

webpack入门介绍及简单配置(代码片段)

webpack在当前前端工程师常用的一个工程化打包工具，官方对webpack的介绍是：webpack本质上是一个现代JavaScript应用程序的静态模块打包器(staticmodulebundler)。在webpack处理应用程序时，它会在内部创建一个依赖图(dependencygr... 查看详情

将环境变量从 gulp 注入到 webpack

】将环境变量从gulp注入到webpack【英文标题】：Injectinganenvironmentvariablefromgulptowebpack【发布时间】：2016-01-1923:20:09【问题描述】：我有一个用于启动webpack捆绑的gulpfile。webpack配置定义了一个使用process.env.NODE_ENV的别名，如下所示..... 查看详情

webpack配置之入门二（css篇）

...面，css也成为了网站不可或缺的一部分，这章节主要介绍webpack处理css部分，1、webpack处理css在webpack中，我们通过style-loader与css-loader来处理css，而style-loader与css-loader是不同的，style-loader是在html中创建一个标签来导入css的，而css-l... 查看详情

如何从 laravel mix 迁移到纯 Webpack？

】如何从laravelmix迁移到纯Webpack？【英文标题】：HowtomigratefromlaravelmixtopureWebpack?【发布时间】：2020-01-2821:58:47【问题描述】：鉴于新Laravel项目的webpack.mix.js：constmix=require(\'laravel-mix\');/*|-------------------------------------------------- 查看详情

webpack-源码三，从源码分析如何写一个plugin

经过上一篇博客分析webpack从命令行到打包完成的整体流程，我们知道了webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。社区里很多webpack的plugin，但是具体到我们的项目并不一定适用，这篇博客告诉你如何入手... 查看详情

公开通过 webpack 捆绑的 javascript 全局变量

】公开通过webpack捆绑的javascript全局变量【英文标题】：Exposejavascriptglobalsbundledviawebpack【发布时间】：2017-11-2705:14:49【问题描述】：问题我觉得这应该比现在更直接。我需要从前端访问我的所有javascript库，并且因为我将它集成... 查看详情

webpack入门学习

一、认识webpack webpack是一款模块打包加载工具。它能够将各种资源、JS、CSS、图片等作为模块打包加载。本人也是近期因工作需要才开始接触webpack，在下文中有误的地方还希望各位能够指出，本人也会积极改正。二... 查看详情