-
多個entry
查看全部 -
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可以壓縮圖片。
查看全部 -
多頁面配置，多個入口文件引用：
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）, 具體怎么把這三個文件的內容變得自由控制，還沒講到。目前除了標題還是統一的。
查看全部 -
避免每次打包生成新的文件，需要每次手動修改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 [email protected] --save-dev
重新打包：
npm run weboack
安裝插件真的是一個坑，報錯就重新裝一遍，不行換個版本再試試！
查看全部 -
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'????
????}
}
查看全部 -
第一：
webpack如何在命令行中安裝：
第一步全局安裝： cnpm install -g [email protected] ( 最新版本坑 ，所以安裝了老師視頻里的版本)
第二步項目安裝：cnpm install --save-dev [email protected]（同上）
第二：
學習直接在命令行中使用webpack對一個js文件進行打包
第三：
學習如何在js文件中引用css，并且使得css在html中生效（使用了 style-loader!css-loader!.style.css），其中css-loader是使得webpack可以處理.css文件，style-loader 是把處理完的文件，新建一個<style></style>標簽，插入到<head></head>中
第四：
學習了webpack的高級參數，優化打包
查看全部 -
--watch 自動更新
--progress 看到打包過程的進度
--display-modules 列出打包的各模塊
查看全部 -
webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader
不用加引號，不然報錯
查看全部 -
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
}
}
查看全部 -
// '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
}
}],
}
};
查看全部 -
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
查看全部
舉報