webapck 基础配置文件 (小白篇)

分类：Webpack作者：编程之家用户

为什么选择 webpack

  • 社区生态丰富
  • 配置灵活和插件化扩展
  • 官方更新迭代速度快

配置文件名称

  • webpack 默认配置文件 webpack.config.js
  • 也可以通过 webpack --config 执行配置文件

webpack 配置组成

module.exports = {
  entry:   ----> 打包文件的入口
    output:  -----> 打包的输出
    mode: 'production'  ----> 环境
    module: {
        rules: [
            { test: /\.txt$/ }   -----> Loader 配置
        ]
    },
    plugins: [      -------> 插件配置
        new HtmlwebpackPlugin({
            template: ''
        })
    ]
}

使用 webpack 打包文件

  • 使用 webpack 小案例

准备文件及安装webapck

  1. 打开终端 常见文件 及 初始化项目 （注意要先安装 node）
mkdir  my-webpack
cd my-webpack
npm init -y
  1. 安装 webpack 及 webpack-cli
npm install webpack webpack-cli --save-dev
  1. 新建webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'production'
}
  1. 创建src 下的 index.js 文件，简单写一写逻辑代码
  2. 然后在项目目录下的终端执行
./node_modules/.bin/webpack
  • 然后会在 dist 文件夹中找到打包后的 main.js 文件
  1. 使用 npm 命令 替代 ./node_modules/.bin/webpack 打包
  • 在 package.json 中的 scripts 添加 build 命令
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
  • 执行 npm run build 一样可以打包

entry 和 output

单入口

entry: './src/index.js',
output: {
    path: path.join(__dirname, 'dist'),
  filename: 'build.js'
}

多入口

entry: {
    app: './src/index.js'
    app2: './src/main.js'
},
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
},

Loaders

  • 本身就是一个函数，接收源文件作为参数，返回转换的结果

常用的 Loaders

  • babel-loader
  • css-loader
  • less-loader
  • ts-loader
  • file-loader

Plugins

  • 插件用于 bundle 文件的优化，资源管理和环境变量注入
  • 作用于整个构建构成

常见的 Plugins

  • CleanWbpackPlugin 清理构建目录
  • CommonsChunkPlugin 讲chunks相同的模块代码提取成公共 js
  • HtmlWebpackPlugin 创建 HTML 文件去承载输出的 bundle
  • UglifyjsWebpackPlugin 压缩JS

Mode

  • 用来指定当前的构建环境是 production development 还是 none
  • 设置 mode 可以使用 webpack 内置函数，默认值是 production
module.exports = {
  mode: 'development'
};
  • 或者从 cli 参数中传递
webpack --mode=development

内置函数功能

  • 选项 development

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。

  • production

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。

  • node

不使用任何默认优化选项

使用 babel 解析 ES6

  • 安装 babel 解析文件
npm i @babel/core @babel/preset-env babel-loader -D
  • 创建 .babelrc 文件 并添加：
{
  "presets": [
    "@babel/press-env"
  ]
}
  • webpack.config.js 中添加 rules
module: {
    rules: [
        {
            test: /.js$/,
            use: 'babel-loader'
        }
    ]
}

解析 CSS 文件

  • 安装 style-loader 和 css-loader
  • 修改 webpack.config.js 文件
module: {
    rules: [
        {
            test: /.js$/,
            use: 'babel-loader'
        },
        {
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

loader 的执行顺序是 从又右到左的

url-loader 解析图片

  • 安装 url-loader 和 file-loader
module: {
    rules: [
        {
            test: /.js$/,
            use: 'babel-loader'
        },
        {
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /.(png|jpg|gif|jpeg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: { // 图片大小的限制 如果小于 10k 转成 base64 格式
                        limit: 10240
                    }
                }
            ]
        }
    ]
}

webpack 文件监听

  1. 启动 webpack 命令时，带上 --watch 参数
    • 缺点是： 每次需要手动刷新浏览器
  2. 在配置 webpack.config.js 中设置 watch: true
  • 文件监听的原理分析
    • 轮询判断文件的最后编译事件是否变化
    • 某个文件发生了变化，并不会立即监听者，而是先缓存起来，等 aggregateTimeout
watch: true,
watchOptions: {
    // 默认为空，不监听文件或文件件，支持正则
    ignored: /node_modules/,
    // 监听发生变化后等待 xxx 毫秒去执行，默认 300
    aggregateTimeout: 300,
    // 判断文件是否发生变化，通过不停的询问系统指定文件有没有变化实现，默认每秒问 1000 次
    poll: 1
}

热更新 webpack-dev-server

  • 特点： 不刷新浏览器，不输出文件，而是放在内存中
  • webpack-dev-server --open

热更新 使用 webpack-dev-middleware

  • 通过 node express/koa 创建一个 server 编写相关逻辑
  • 将 webpack 输出文件传输给服务器
  • 适用于灵活的定制场景

热更新的原理分析

  1. Webpack Compile
  • 将 JS 编译成 Bundle (打包好输出的文件)
  1. HMR (Hot Module Replacement) Server：
  • 将热更新文件传输给 HMR Rumtime
  1. Bundle Server:
  • 提供文件在浏览器的访问 (通过服务器的方式访问，例如 127.0.0.1:8080)
  1. HMR Rumtime:
  • 打包时会被注入到浏览器中，使浏览器和服务器建立连接，通常的连接方式是用 websocket, 用来更新文件的变化
  1. bundle.js
  • 构建输出的文件

热更新的过程

  1. 热更新的启动阶段
  • 代码通过 Webpack Compile 进行编译打包，然后将编译好的文件传输给 Bundle Server （服务器），让文件以 server 的方式被 浏览器 访问到。
  1. 更新阶段
  • 代码通过 Webpack Compile 进行编译打包，将代码发送给 HMR Server 知道哪些 js 文件发生变动，然后通知 HMR Rumtime （HMR Server 在 服务端，HMR Rumtime 在客户端）哪些文件发生变化，通常是已JSON 的方式传输，然后 HMR Rumtime 更新代码.

文件指纹

  • 打包后输出的文件名的后缀

Hash

  • 和整个项目的构建相关, 只要项目文件有修改，整个项目构建的 hash 值就会更改

Chunkhash

  • 和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值

Contenthash

  • 根据文件内容来定义 hash，文件内容不变，则 Contenthash 不变
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name][chunkhash:8].js'
  },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[name][hash:8].[ext]'
                        }
                    }
                ] 
            },
            {
                test: /.css$/,
                use: [
                    // 'style-loader', 这个是把 css 放到 style 里面和用  MiniCssExtractPlugin 有冲突，它是把 css 放到一个独立的文件中
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    }
  mode: 'production',
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ]
}

:8 意思是只取前 8 位

  • 图片文件指纹设置可选参数
    • [ext] : 资源后缀名
    • [name] : 文件名称
    • [path] : 文件相对路径
    • [folder] : 文件所在的文件夹
    • [contenthash]: 文件内容的 hash 默认 MD5 生成
    • [hash] : 文件内容的 hash 默认 MD5 生成
    • [emoji] : 一个随机的指定文件内容的 emoji

代码压缩

JS 文件的压缩

  • uglifyjs-webpack-plugin webpack4.0 后内置了

css 压缩

  • 安装
    • npm i optimize-css-assets-webpack-plugin -D
    • npm i cssnano -D
  • 代码
new OpeimizeCssAssetsPlugin({
    assetNameEegExp: /\.css$/g,
    cssProcessor: require('cssnano')
}),

html 压缩

  • 安装
npm i html-webpack-plugin -D
  • 代码
new HtmlWebpackPlugin({
    // 模板 所在的位置
    template: path.join(__dirname, 'src/index.html'),
    // 指定打包后的文件名称
    filename: 'index.html',
    // 声明 HTML 使用什么 chunks
    chunks: ['index'],
    // 把引入的 js 或 css 自动注入
    inject: true,
    minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
    }
})



原文地址：https://www.cnblogs.com/ecplko/p/14059261.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

umi 框架 如何配置 自定义 插件 和 loader
一准备工作umi为react的一个封装比较nice的脚手架。优点当然就是安装方便，开箱即用，集成了诸多好用功能，详见官网。当然缺点就是无法暴露原始的webpack.config.json文件，只能按照官方文档上特定的方法进行修改，而文档却并不完善。项目顺利进行大家笑嘻嘻，一旦遇到偏难怪需求，
webpack之shimming的应用(webpack.ProvidePlugin)
webpack在引入两个依赖的包时，可能需要使用shimming，意思是处理代码上的兼容1、在main.js中引入jqueryimport$from'jquery'importappendfrom'./append'//下面的给页面添加元素文件append()2、append.js使用main.js的$向页面中添加元素functionappDomFunc(){
webpack性能优化(TODO)
  Happypack (plugin)多线程使用loader编译文件treeshaking删除无用JS代码，依赖ESM规范source-map生产环境一定去掉process.env.XXX配置环境变量，区分各种编译环境splitchunks 代码分离去重DynamicImport动态加载js文件Hot-module-replacement开发环境热更新w
前端项目架构分析
一目录结构├──build//构建相关├──config//配置相关├──src//源代码│├──api//所有请求│├──assets//主题字体等静态资源│
2、管理资源
接着第一节的demo现在我们尝试整合一些其他资源，比如图像，看看webpack如何处理。在webpack出现之前，前端开发人员会使用grunt和gulp等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于JavaScript模块，但是，像webpack这样的工
面试题： Webpack 的 plugin 和 loader 有什么区别
webpack的打包原理识别入口文件通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)webpack做的就是分析代码，转换代码，编译代码，输出代码最终形成打包后的代码什么是loaderloader是文件加载器，能够加载资源文件，并对这些文件进行
全面掌握Webpack4.0 (一)Webpack究竟是什么2 持续更新...
上一篇文章我们在一个demo中见到了webpack的身影，如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”，但事实上webpack可不仅仅可以‘翻译’代码,事实上，webpack是一个‘打包’工具，‘打包‘才是webpack的核心任务。打开webpack的官网：webpack中
webpack前端模块化打包工具(webpack打包css,url,babel等,配置Vue文件依赖,搭建本地服务器和发布项目)
注：本章将配合Vue详细讲解webpack前提条件1.在开始之前，请确保安装了Node.js和npm的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少webpack功能以及/或者缺少相关package包。在cmd中node-v,npm-v可查看对应的版本和安装情况。2.这里会用到ES6的模块化，如果你
vue webpack优化之路
前言、之前我认为对于项目的优化无非是从代码上去优化一些东西，比如循环呀函数式调用呀让你的代码看起来更加的简洁容易懂后来我在面试过程中不断有面试官不断地问了我这些问题所以自己就去研究了一下发现并不是我之前想的那样，一个好的webapck优化的胜过于你在整体代码上
vue03
##一、组件component###1.什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（对象）###2.定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件###3.组件的分
webpack
 #webpack5概述>webpack是一个现代javascript应用程序的**静态模块打包器(modulebundler)**>>vue-cli脚手架环境,集成了webpack,所以才能对各类文件进行打包处理[webpack官网](https://webpack.js.org/) ##webpack能做什么webpack是一个静态模块打包
webpack原理-实现webpack打包js
//这里导入webpack配置，我用对象的形式表示，当然entry属性上定义的文件要有//constconfig=require("./webpack.config");constconfig={entry:'./src/index.js'};const{join,dirname}=require("path");const{readFileSync,writeFileSync}=requi
vux-cli3 项目文件分析 webpack-bundle-analyzer
安装cnpminstallwebpack-bundle-analyzer-D 修改vue.config.jsmodule.exports={chainWebpack:config=>{if(process.env.use_analyzer){//分析config.plugin('webpack-bundle-analyzer')
webpack打包html插件html-webpack-plugin的使用
webpack打包html插件html-webpack-plugin的使用1.创建这样的测试目录结构1）index.html是即将被打包的文件，你可以随便写一些内容2）index.js是打包的入口文件，你可以写或不写内容2.webpack.config.js的代码如下：/***压缩html需要插件：html-webpack=plugin*插件使用方法：
vue init webpack tabbar创建vue项目时出现问题
vueinitwebpacktabbar创建vue项目时出现问题vue:无法加载文件C:\Users\dengqian\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。C:\Windows\System32\WindowsPowerShell\v1.0，找到如上路径，以管理员身份运行powershell.exe即可输入set-ExecutionPolicyRemo
【vue+ECharts】在 webpack 中使用 ECharts
在webpack中使用ECharts【官网教程】1、使用如下命令通过npm 安装EChartsnpminstallecharts--save2、全局引用在main.jsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts;3、运用<divstyle="width:60vw;height:280px;"ref="chart"&
解读 vue-cli 脚手架二：npm run build 的背后
如果没有看过我的上一篇文章，请先移步去看一下哈！时隔一年多，之前写的文章感觉大家还挺喜欢的，一直说要更新下一篇。但是一直没有机会，没时间，还有就是，感觉自己的技术，可能不足以支持我继续往下走。但是经过这个一年多的历练，感觉很多东西考虑的会更周全，不负期待！废话说一堆，步入正题
webpack 创建本地node服务
dist文件配置对应的路由名展示这样的效果可以创建一个本地的服务还可以进行代理项目开发是在src里进行代码逻辑编写./表示本地路径/表示绝对路径(nginx需要配置)
新建webpack-vue项目以及引入element ui组件
 1、用命令创建webpack模板项目vueinitwebpack 项目名，需要选是否的统一选否，所以的依赖手动添加  2、安装依赖vue-router,elementui,sass-loader,node-sass，axios插件安装路由：npminstallvue-router安装elementu
webpack打包后动态修改process.env
最近想把蘑菇博客部署到k8s上，作为一名java搬砖工，搬砖人不讲码德，biu一下就把后端各模块的dockerfile和chart包copy过来了，很快啊！接下来就可以愉快的使用helm管理蘑菇后端服务部署了。部署完后端服务后，准备制作前端镜像，发现前端打包后，无法动态读取系统环境变量，这很头疼，难不
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot