目錄
➌ 添加extract-text-webpack-plugin打包
-
✦ 前言
普通webpack的打包css被打包到了js文件中，以字符串的形式存在，並且整個bundle.js比平常大了不少！
而現在利用webpack來管理css（合併），並增加hash（性能優化），當前項目使用 webpack -version 版本爲4.41.5。開始選擇的插件是extract-text-webpack-plugin，安裝命令如下：
如果使用ExtractTextWebpackPlugin插件，打包並查看public，可以發現，bundle.js文件恢復了正常，並多出來一個[name].css文件。
並且配合HtmlWebpackPlugin插件則自動插入index.html中。
-
✦ 文章
-
➬ 文檔
-
➬ 遇到的問題
- webpack爲什麼要配置ExtractTextPlugin插件
- ExtractTextPlugin.extract Unexpected token ':' 報錯解決辦法（錯誤picture1）
- Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 報錯解決辦法（錯誤picture2） / 或者【npm install --save-dev webpack 博客】
- Tapable.plugin is deprecated. Use new API on `.hooks` instead 解決辦法（錯誤picture3）
- Cannot find module 'json-parse-better-errors' 本地安裝，webpack打包還是報錯，解決辦法（全局安裝：npm install json-parse-better-errors -g）
- Cannot find module 'neo-async' 本地安裝，webpack打包還是報錯，解決辦法（全局重裝，不然之前可以打包的項目也不能打包了，npm install -g webpack）
-
➬ 配置和實戰
-
✦ 本章節學習內容
-
✔ 基本代碼和目錄結構
- 1 目錄結構
- 2 基本代碼
/* ../vue-styl/webpack.config.js */
module.exports = {
entry: __dirname + "/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
/* PS:如果webpack執行之後沒有問題,則僅僅執行淘寶鏡像,webpack和webpack-cli不需要安裝 */
/* ../vue-styl/app/main.js */
var mymodule = require("./module.js")
mymodule.sayHello();
/* ../vue-styl/app/module.js */
module.exports = {
sayHello:function(){
console.log("hello world");
}
}
-
➊ 模塊安裝
- 安裝所需loader及依賴木塊，style-loader、css-loader、stylus-loader、stylus。
- 對應webpack-cli、webpack和加速器
✔ 必須執行 -- npm config set registry https://registry.npm.taobao.org ✔ 必須執行 -- npm install webpack --save-dev <!-- 注意如果全局安裝過webpack-cli，又本地安裝執行webpack指令會報錯， 解決辦法是執行：➀ npm link webpack --save-dev 再執行：➁ webpack ✘ 這個搞了好幾個小時，因爲還有其他錯誤，哎~ ✘ --> ☐ 這個無所謂，如果全局安裝了，則不需要執行 -- npm install webpack-cli --save-dev - 安裝所需插件，extract-text-webpack-plugin、html-webpack-plugin
✔ 必須執行 -- npm install style-loader --save-dev
✔ 必須執行 -- npm install css-loader --save-dev
✔ 必須執行 -- npm install stylus-loader --save-dev
✔ 必須執行 -- npm install stylus --save-dev
/*
* 注意是：使用extract-text-webpack-plugin的最新的beta版；
* text不是test,打錯過一次,下不下來依賴
*/
✔ 必須執行 -- npm install extract-text-webpack-plugin@next --save-dev
✔ 必須執行 --npm install html-webpack-plugin --save-dev
-
➋ 添加html-webpack-plugin打包
- 1 webpack.config.js內容
/* ../vue-styl/webpack.config.js */
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: __dirname + "/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
plugins: [
new HtmlWebpackPlugin()
]
}
-
2 打包
這將會自動在 public 目錄中生成一個名爲 index.html 和bundle.js 的文件。
webpack
-
3 ../vue-styl/public/index.html內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
-
➌ 添加extract-text-webpack-plugin打包
- 0 前言
bundle.js 文件配置學習篇
- 1 webpack.config.js 引入相應的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
2 解析stylus文件，在loader的配置當中，rules的test通過正則，匹配後綴名是.styl的文件，匹配成功之後使用ExtracTextPlugin插件的extract方法進行相應的解析，解析成功之後fallback的style-loader進行樣式的解析，從而使樣式起作用
- 3 生成的樣式需要添加到頁面中plugins
問題：執行webpack指令的時候回報錯（錯誤picture）！
解決辦法：全局重裝試一下
➀ 配置：
1、a.js
module.exports = { sayHello:function(){ console.log("hello world"); } }2、index.stylbody background:red3、main.js(引入必須寫，這個是入口，不然打包無x.css文件，x.css內容也不會在bundle.js裏面)
var a = require("./a.js") var index = require("./index.styl")➁ 解析前：
➂ 解析後：
➍ 效果圖：
☞ 對比圖：
-
✦ 整體代碼
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
rules: [{
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ["css-loader", "stylus-loader"]
})
}]
},
plugins: [ /* 注意是[],之前錯誤就是因爲這個 */
new HtmlWebpackPlugin(),
new ExtractTextPlugin('[name].css'),
]
}
-
✦ 總結
