webpack深入与实战_学习笔记

首页免费课 webpack深入与实战笔记

webpack深入与实战

                
                qbaty
            Web前端工程师

                    查看讲师更多课程 
                    qbaty讲师的其他课程
                
Yarn构建工具入门基础
中级·11912
免费课程
                                
                难度中级
            
                时长 3小时21分
            
                学习人数
            
综合评分9.60
                            259人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.5
                                逻辑清晰

最热最新

RaysLiu 02:37

多个entry

查看全部

0 采集收起来源：webpack配置的 entry 和 output new
2020-06-23
慕粉6407827

1、babel-loader： es6 转es5。需要安装 babel-loader 和 @babel/core和 babel-preset-latest
2、css-loader：使得webpack可以处理css文件，style-loader 将处理好的css文件新建一个<style>标签插入<head>中，less-loader或者sass-loader等处理预处理文件。postcss-loader处理浏览器兼容。
3、html-loader、vue-loader等处理模板文件
4、file-loader、url-loader、image-loader 处理图片，其中image-loader可以压缩图片。

查看全部

1 采集收起来源：处理图片以及其他文件
2020-05-13
慕粉6407827

多页面配置，多个入口文件引用：
entry: {
        main: './src/script/main.js',
        a: './src/script/a.js',
        b: './src/script/b.js',
        c: './src/script/c.js',
    },

需要生成 a.html, b.html, c.html，这三个共用一个 index.html 模板。生成三个，就要初始化三个htmlWebpackPlugin实例。
plugins: [
        new htmlWebpackPlugin({
            filename: 'a.html',
            template: 'index.html',
            title: 'this is a.html',
            chunks: ['main', 'a']
        }),
        new htmlWebpackPlugin({
            filename: 'b.html',
            template: 'index.html',
            title: 'this is b.html',
            chunks: ['b']
        }),
        new htmlWebpackPlugin({
            filename: 'c.html',
            template: 'index.html',
            title: 'this is c.html',
            chunks: ['c']
        })
    ]
然后模板都是template: 'index.html',
filename是生成的文件名，所以是a.html, b.html, c.html.
chunks: 选项是指定加载的js文件。

这样，就完成了一个入口文件（index.html）生成多个出口文件了（a.html, b.html, c.html）, 具体怎么把这三个文件的内容变得自由控制，还没讲到。目前除了标题还是统一的。

查看全部

0 采集收起来源：自动化生成项目中的html页面(下)
2020-05-12
慕粉6407827

避免每次打包生成新的文件，需要每次手动修改index.html 引入打包文件的路径名称，使用了html-webpack-plugin 插件。
使用时候先require引入
var htmlWebpackPlugin = require('html-webpack-plugin');
使用插件
plugins: [ new htmlWebpackPlugin() ]
然后重新打包，npm run webpack
报错了： Cannot read property 'make' of undefined.......
解决办法是，安装别的版本的插件：
卸载：
npm uninstall html-webpack-plugin
安装：
npm install html-webpack-plugin@2.30.1 --save-dev
重新打包：
npm run weboack
安装插件真的是一个坑，报错就重新装一遍，不行换个版本再试试！

查看全部

0 采集收起来源：自动化生成项目中的html页面(上)
2020-05-12
慕粉6407827

webpack 3.12.0中 path需要一个绝对路径，所以需要改动一下：
var path = require('path');
module.exropts = {
    entry: './src/script/main.js',
output: {
            path: path.resolve(__dirname, './dist/js'),
filename: 'bundle.js'
    }
}

查看全部

0 采集收起来源：建立项目的 webpack 配置文件
2020-05-11
慕粉6407827

第一：
webpack如何在命令行中安装：
第一步全局安装： cnpm install -g webpack@1.13.2 ( 最新版本坑，所以安装了老师视频里的版本)
第二步项目安装：cnpm install --save-dev webpack@1.13.2（同上）
第二：
学习直接在命令行中使用webpack对一个js文件进行打包
第三：
学习如何在js文件中引用css，并且使得css在html中生效（使用了 style-loader!css-loader!.style.css），其中css-loader是使得webpack可以处理.css文件，style-loader 是把处理完的文件，新建一个<style></style>标签，插入到<head></head>中
第四：
学习了webpack的高级参数，优化打包

查看全部

0 采集收起来源：Webpack 安装和命令行
2020-05-12
慕粉6407827

--watch 自动更新
--progress 看到打包过程的进度
--display-modules 列出打包的各模块

查看全部

0 采集收起来源：Webpack 安装和命令行
2020-05-11
慕粉6407827

webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader
不用加引号，不然报错

查看全部

0 采集收起来源：Webpack 安装和命令行
2020-05-11
braveheart城市猎人

const webpack = require('webpack');
const path = require('path');
const glob = require('glob'); //返回正则路径下所有匹配的文件
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//__dirname为当前路径
// path.resolve:方法会把一个路径或路径片段的序列解析为一个绝对路径
//path.join():方法使用平台特定的分隔符[Unix系统是/，Windows系统是\ ]把全部给定的 path 片段连接到一起，并规范化生成的路径。若任意一个路径片段类型错误，会报错
// ** : 和 * 一样,可以匹配任何内容,但**不仅匹配路径中的某一段,而且可以匹配 'a/b/c' 这样带有'/'的内容,所以,它还可以匹配子文件夹下的文件.
let DISR_PATH = path.resolve(__dirname, '../dist');
let SRC_PATH = path.resolve(__dirname, '../src');
// console.log(SRC_PATH)

let entryFiles = {}; //入口文件
let pluginAll = []; //放所有插件
// var filesTest = path.join(SRC_PATH + '/**/*.js');
// console.log(filesTest);
//[\s]表示只要出现空白就匹配
//[\S]表示非空白就匹配

let jsFiles = glob.sync(SRC_PATH + '/**/*.js');
jsFiles.forEach((file, index) => {
let subkey = file.match(/src\/(\S*)\.js/)[1];
entryFiles[subkey] = file;
})
console.log(jsFiles);
// console.log(entryFiles)

let htmlFiles = glob.sync(path.join(SRC_PATH, '**/*.html'));
console.log(htmlFiles)
htmlFiles.forEach((page, index) => {
let htmlConfig = {};
let pageStr = page.match(/\/src\/(\S*)\.html/);
let name = pageStr[1];
console.log(name)
htmlConfig = {
filename: path.join(DISR_PATH, name + '[chunkhash:5].html'),
title: name,
template: path.join(SRC_PATH, name + '.html'),
inject: 'head', //script放在html里面的位置 body head true(默认值) false
hash: true,
chunks: [name],
date: new Date(),
minify: {
removeComments: true,
// collapseWhitespace: true //压缩空格
}
};
// 如果是index页面，需要添加common.js到页面中
if (name === 'index/index') {
htmlConfig.chunks = [name, 'common'];
console.log(htmlConfig.chunks)
}

let htmlplugin = new htmlWebpackPlugin(htmlConfig);
pluginAll.push(htmlplugin);
})
pluginAll.push(new CleanWebpackPlugin());
module.exports = {
// 入口js文件
// entry: path.resolve(__dirname, '../src/index.js'), // 方式一
// entry: [SRC_PATH + '/index.js', SRC_PATH + '/test.js'], //方式二
entry: entryFiles,
// 编译输出的路径
output: {
path: DISR_PATH, //本地编译后地址
filename: '[name][chunkhash:5].js',
// publicPath: 'http://cdn.com', //上线地址
},
// 模块解析
module: {

},
// 插件
plugins: pluginAll,
devServer: { // webpack启动一个开发服务器
hot: true, //热更新
contentBase: DISR_PATH, //热启动当前路径
port: 8011, //服务端口
host: '0.0.0.0', //host地址访问路径,
open: true,
useLocalIp: true, //是否在打包的时候用自己的ip
historyApiFallback: true, //任意的 404 响应都可能需要被替代为 index.html
proxy: {
'/api': 'http://localhost:3000'
},
https: true
}

}

查看全部

0 采集收起来源：什么是 Loader 以及 Loader 的特性
2020-04-04
braveheart城市猎人

// 'off' 或 0 - 关闭规则
// 'warn' 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
// 'error' 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

module.exports = {
env: {
worker: true,
browser: true,
commonjs: true,
jquery: true,
es6: true
},
globals: {
$Fire: true,
$UEE: true,
$Page: true,
$Controller: true,
OC: true,
grpAdUtilCtz: true,
angular: true,
adutil: true,
dontTouchDataOfWholePage: true,
youCanTouchDataOfWholePage: true,
encryptWithRSA: true,
Close_tabSet: true,
srAdUtilCtz: true,
VALIDATOR_EXCLUDEDCOMPARE: true,
iemp: true,
eview: true,
$eview: true,
BRANCH: true,
showExceptionMessageWindow: true,
piuACMenu: true,
define: true,
VASPOOL: true,
__inline: true,
PublicUtil: true,
showExceptionMessageWindow: true,
isCidr: true,
cidrAddressIpv6: true,
transitIp: true,
isIPv6: true,
ipv6ToBinary: true,
initaddr: true,
addZero: true,
cidr2IpMask: true,
maskNum2ip: true,
num2dot: true,
ipv6mask_int_to_string: true,
ipv6_cmp: true,
getType: true,
deepClone: true,
promiseAjax: true,
cidrRemoveZero: true,
checkIPv4Subnet: true,
checkIPv6Subnet: true,
ip2number: true,
checkCidr: true,
checkCidrIPv6: true,
topology: true,
InheritUtil: true,
DrawUtil: true,
CaculateUtil: true,
ShadowUtil: true,
DashedLine: true,
eviewC: true,
TopoNode: true,
TopoLink: true,
Util: true,
seajs: true,
topoCbbQuery: true,
downloadExcel: true,
Prel: true,
},
extends: 'eslint:recommended',
parserOptions: {
sourceType: 'module'
},
rules: {
'no-self-compare': 2, // 禁止自身比较
'brace-style': [2, '1tbs', {
allowSingleLine: true
}], // if while function 后面的{必须与if在同一行，java风格。
'no-constant-condition': 0, //禁止在条件中使用常量表达式 if(true) if(1)
'operator-linebreak': [2, 'before'], // 换行时运算符在行尾还是行首
'linebreak-style': 0, //强制使用一致的换行风格
"wrap-regex": 2, //要求正则表达式被括号括起来
semi: [2, 'always'], // 语句强制分号结尾
'no-multi-spaces': 1, // 不能用多余的空格
'no-multiple-empty-lines': [1, {
'max': 1
}], //空行最多不能超过2行
'eqeqeq': 2, // 必须使用全等
'no-undef': 1, // 不能有未定义的变量
'no-use-before-define': [2, {
'functions': false
}], // 禁止在变量定义之前使用它们
// "max-statements": [1, 40], // 强制函数块最多允许的的语句数量
'no-unneeded-ternary': 2, // 禁止可以在有更简单的可替代的表达式时使用三元操作符 var isYes = answer === 1 ? true : false;
'semi-spacing': [2, {
before: false,
after: true
}], //分号前后空格
// 注释的斜线和星号后要加空格
'spaced-comment': [2, 'always', {
'block': {
exceptions: ['*'],
balanced: true
}
}],
}
};

查看全部

1 采集收起来源：自动化生成项目中的html页面(下)
2020-04-04
qq_加油君_1

webpack4 module 和babel的安装方法都有不同
1,https://www.babeljs.cn/setup#installation
npm install --save-dev babel-loader @babel/core
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }

npm install @babel/preset-env --save-dev
.babellrc
{ "presets": ["@babel/preset-env"] }
重要的是看官网 cnpm和npm不要混用
如果混用出现错误把node-modules文件夹删掉
重新 npm install

查看全部

0 采集收起来源：使用 babel-loader 转换 ES6 代码（上）
2020-02-22

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、对模块化开发有一些了解 2、使用过 node 对 npm 有基本的了解 3、对打包有一个基本的概念

老师告诉你能学到什么？: 1、模块化的开发 2、webpack 的 CLI (命令行) 3、webpack 如何在项目中打包 4、webpack 如何处理项目中的资源文件

微信扫码，参与3人拼团

热搜

最近搜索清空

webpack深入与实战