webpack：（模块打包机）

最新推荐文章于 2024-09-14 23:13:50 发布

banbiante5717

最新推荐文章于 2024-09-14 23:13:50 发布

阅读量116

点赞数

文章标签： webpack javascript json ViewUI

原文链接：http://www.cnblogs.com/MrZhujl/p/10176171.html

版权

webpack https://www.webpackjs.com/

　　学webpack就靠记忆、英文（报错都是英文的，挂就挂在一报错就懵圈）报错了就多翻译，多报几次就会了未来的Vue或者React都的用它

模块化开发：

　　不管下面3个有多大区别，核心点：就是他们如何做到的模块化方式。

　　简单点:如何导出，如何引入。

CommonJS node就遵循这套规范

　　module.exports 导出

　　require（）引入

CommonJS规定，每一个JS都是单独的模块（模块是私有的：里面涉及的值、变量以及函数等都是私有的，和其它JS文件中的内容不冲突）

特点：

　　1. 所有代码都运行在模块作用域，不会污染全局作用域（每一个模块都是私有的，包括里面所有的东西都是私有的）

　　2. 模块可以多次加载，但是只会在第一次加载时运行一次，因为第一次加载的时候缓存了。如果想多次调用，必须清理缓存。（为了保证性能，减少模块代码重复执行的次数）

　　3. 模块加载顺序时按照其在代码中出现的顺序。CommonJS是同步操作

AMD require.js

　　 Asynchronous Module Definition，即异步模块加载机制

CMD sea.js

　　 CMD(Common Module Definition)表示通用模块定义

ES6模块化

　　import {fn} from './xx.js'; 引入模块

　　　　//xx.js

　　 export function fn(){} 导出模块

　　　　 // 写法一 export var m = 1

　　　　 // 写法二 var m = 1; export {m}

　　　　 // 写法三 var n = 1; export {n as m};

　　 export function fn( ){ } 导出模块

/***************************下面正是进入 webpack*************** 2018-12-25***************/

webpack可以看做是模块打包机，它做的事情是分析你的项目结构。

找到js模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）。

并将打包为适合的格式以供浏览器使用。

　　1.代码转换：ts编译成js，把scss编译为css

　　2.文件优化：压缩js，css，html代码，压缩合并图片等　　

　　3.代码分割：提取多个页面的公关代码，提取首屏不需要的执行部分的代码让其异步加载

　　4.模块合并：在采用模块化的项目了会有很多个模块和文件，需要构建功能把功能模块分类合并成一个文件

　　5.自动刷新：监听本地源代码的变化。自动重新构建刷新浏览器

快速上手：

　　1.初始化项目（取名字的时候一定不要取工具的名字） npm init -y

　　2.安装webpack：(npm i webpack webpack-cli -D)

　　　　在全局安装：

　　　　　　npm i webpack -g 不建议。

　　　　建议在本地安装：

　　　　　　npm install webpack -save-dev

　　　　　　npm i webpack-cli -D

　　　　　　简写：npm i webpack -D

　　　　开发依赖：有些配置开发的时候使用，到了线上就不使用了

　　　　项目依赖：打包后上线需要的依赖 npm i xx -S

　　3.手动创建 webpack.config.js 文件

　　4.入口、出口、模块、插件

　　　　在package.json文件里"scripts"对象里写入"build":"webpack"。

　　　　npm run build （build，是自己起的要创建的文件夹的名字

5. 安装 npm i html-webpack-plugin -D

英文储备：

path：路径

resolve：决心、分解、下决定

dirname：目录名

filename：文件名

mode 方式

developments：发展、新产品development的复词

entry：入口

output：输出

plugins：外挂

template：样板、模板

chunk：大块、厚厚的一块

module：模块

exports：出口

collapse：崩溃、坍塌

whitespace：空白符 white：白 space：太空、空间、空白

removeAttributeQuotes：去掉属性的引号 attribute：认为...是、把...认为 quote：报价; 引述; 引用

minify：缩小（这里可以理解为压缩）

参考代码--语法：

let path = require('path')
module.exports = {
    mode:'development',//要配置mode：development （开发依赖）  mode：production （生产依赖）
    entry:'./c.js',//入口文件,去解析某个（些）指定的文件，最终编译成浏览器可以使用的文件
    output:{ //出口
        path:path.resolve(__dirname,'build'),//把出口文件放在当前目中一个叫build的文件夹里（path：路径，__dirname：目录名）
        filename:'c.js',
    },  
}

let path = require('path')
/*
下载、引入html-webpack-plugin的插件
*/
const HWP = require('html-webpack-plugin');// npm i html-webpack-plugin -D
module.exports = {
    mode:'development',//要配置mode：development （开发依赖）  mode：production （生产依赖）
    entry:{//['./c.js','e./js'],//入口文件,去解析某个（些）指定的文件，最终编译成浏览器可以使用的文件（entry：可以是字符串、数组、对象）
        cc:'./c.js',
        ee:'./e.js'
    },
       
    output:{ //出口
        path:path.resolve(__dirname,'build'),//把出口文件放在当前目中一个叫build的文件夹里（path：路径，__dirname：目录名）
        filename:'[name].[hash:5]js',//出口文件的文件名,[hash]给文件名添加一个编码。 :5让编码变成5位数。
    },
    plugins:[
        new HWP({
            filename:'index.html',//编译后的文件名,不写这句话默认是index.html
            template:'./1_webpack前夕.html',//以哪个html为模板
            chunks:['cc','ee']
        })
    ]
}

const path = require('path');
const HWP = require('html-webpack-plugin');// npm i html-webpack-plugin -D
/*
entry:
    字符串  './c.js'
    数组    ['./c.js','./e.js']
    对象     {cc:'./c.js',ee:'./e.js'}
*/
let obj = {
    mode:'development', //方式
    entry:['./c.js'],  //入口
    output:{ //输出
        path:path.resolve(__dirname,'build'),
        filename:'wmm.js'
    },
    plugins:[  //外挂
        new HWP({
            template:'./1_webpack前夕.html'
        })
    ]
}
module.exports = obj;  //module.exports 模块.出口

const path = require('path');
const HWP = require('html-webpack-plugin');
let obj = {
    mode:'development',
    entry:{
        cc:'./c.js',
        ee:'./e.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].js',
    },
    plugins:[
        new HWP({
            template:'./1_webpack前夕.html',
            chunks:['cc'],
            filename:'index.html',
        }),
        new HWP({
            template:'./2_webpack.html',
            filename:'index2.html',
            chunks:['ee']
        })
    ]
}
module.exports = obj;

const path = require('path');
const HWP = require('html-webpack-plugin'); // npm i html-webpack-plugin -D
let obj = {
    mode:'development',
    entry:{
        cc:'./c.js',
        ee:'./e.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].[hash:5].js'
    },
    plugins:[
        new HWP({
           template:'./1_webpack前夕.html',
           chunks:['cc','ee'],
           filename:'index.html',
           minify: {
                removeAttributeQuotes:true,//去掉属性的引号
                collapseWhitespace:true //html压缩一行
            },
        })
    ]
}
module.exports = obj;