webpack(系列一)

分类：Webpack作者：编程之家用户
### webpack 介绍

* 什么是webpack<https://www.webpackjs.com/>
  * Webpack是一个模块打包器(bundler)。
  * 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
  * 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 五个核心概念
  * Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  * Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
  * Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件
  * Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩，
  * Mode：模式，有生产模式 production (压缩)和开发模式 development 
* 理解 Loader
  * Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
  * Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
  * loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 less-loader。
* 理解 Plugins
  * 插件可以完成一些loader不能完成的功能。
  * 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* 配置文件(默认)
  * webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

 

 

 

1.  import ... from  模块导入

npm init  包名（初始化）， 自动生成一个package.json文件, 

 npm i webpack webpack-cli --save-dev （局部安装）

 npx webpack index.js (webpack将index.js文件编译打包)，自动生成dist文件夹--》main.js的打包文件

index.js

// ES Moudule 模块引入方式
import Header from './header.js';
import Sidebar from './sidebar.js';
new Header();
new Sidebar();
new Content();

header.js

function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = 'header';
    dom.append(header);
}

exports.default  Header;

sidebar.js

function Sidebar() {
    var dom = document.getElementById('root');
    var sidebar = document.createElement('div');
    sidebar.innerText = 'sidebar';
    dom.append(sidebar);
}

exports.default  Sidebar;

index.html， 引入打包之后的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是最原始的网页开发</title>
</head>
<body>
    <p>这是我们的网页内容</p>
    <div id='root'></div>
    <script src='./dist/main.js'></script>
</body>
</html>

此时页面可以注册显示

注；export ...from 是es6语法，浏览器不支持，需要通过webpack解析成浏览器支持的语法.

webpack模块打包工具，将所有的模块打包到一个文件

webapck支持也cmmonJs模块引入规范

// webpack 模块打包工具
// js 模块打包工具 -> 

// import Header from './header.js';
// import Sidebar from './sidebar.js';
// import Content from './content.js';

var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
new Header();
new Sidebar();

function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = 'header';
    dom.append(header);
}
//导出
module.exports = Header;

 

2.webapck安装方法

npm init  -y 初始化包，自动生成一个package.json文件

npm install webpack webpack-cli -g //全局安装,作为指令使用

npm install webpack webpack-cli -D //本地安装,作为本地依赖使用

注；不建议全局安装webpack, 每个项目的webpack版本都不一样，会发生错乱

卸载。 npm uninstall webpack webpack-cli -g

webpack -v 版本(全局查询)

npx webpack -v(局部查询)

 npm i webpack@4.2.5 webpack-cli -D  安装特定版本

 

3. webpack配置文件webpack.config.js

3.1. 配置出入口，此时运行打包命令， npx webpack，即可打包， 后面不需追加入口文件，因为，webpack配置了入口和出口。打包后的文件

dist-->bundle.js
//node内置核心模块，用来设置路径。
const path = require('path');
//只能使用 CommonJS 规范暴露
module.exports = {
    // 入口文件配置
    entry: './src/index.js',
    // 输出配置
    output: {
        // 输出文件名（打包文件名）
        filename: 'bundle.js',
        //输出文件路径配置，dist文件夹，打包之后的路径dist-->bundle.js
        path: path.resolve(__dirname, 'dist')
    }
}

第二种的打包命令，在package.json中的script配置命令， 执行npm  run  bundle（底层执行了npx  webpack）, 即可打包文件了

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}

 

3.2， 打包模式，

webpack默认是配置production环境，他会压缩bundle.js打包文件， 开发环境不会

//node内置核心模块，用来设置路径。
const path = require('path');
//只能使用 CommonJS 规范暴露
module.exports = {
    // 开发环境
    mode: 'development',
    // 入口文件配置
    entry: './src/index.js',
    // 输出配置
    output: {
        // 输出文件名（打包文件名）
        filename: 'bundle.js',
        //输出文件路径配置，dist文件夹，打包之后的路径dist-->bundle.js
        path: path.resolve(__dirname, 'dist')
    }
}

 

* webpack能够编译打包 js 和 json 文件
* 能将 es6 的模块化语法转换成浏览器能识别的语法
不能编译打包 css、img 等文件

打包样式文件中的图片资源

图片文件 webpack 不能解析，需要借助 url-loader编译解析

  1. 两张资源图片:

    • 小图, 小于8kb: src/images/vue.png

    • 大图, 大于8kb: src/images/react.jpg

  2. 在 less 文件中通过背景图的方式引入图片

    .react {
      width: 200px;
      height: 200px;
      background: url('../images/react.png') no-repeat;
      background-size: cover;
    }
    ​
    .vue {
      width: 200px;
      height: 200px;
      background: url('../images/vue.png') no-repeat;
      background-size: cover;
    }

  3. 安装 loader

  > npm install file-loader url-loader --save-dev

补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

  1. webpack.config.js 配置 loader

    module.exports = {
        .
        .
        .
        module: {
            rules: [
                .
                .
                .
                {
                    test: /\.(png|jpg|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,                    // 8kb以下的图片会 base64 处理
                            outputPath: 'images',           // 文件本地输出路径
                            publicPath: '../build/images',   // 图片的url路径，相对打包后的js文件
                            name: '[hash:8].[ext]',         // 修改文件名称和后缀 
                        }
                    }
                },
            ]
        }
    ​
    }

  2. 运行指令   npm  run  bundle

 

原文地址：https://www.cnblogs.com/fsg6/p/14488685.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