一直使用webpack,上次也分享過webpack配置es6~9的語法參考鏈接,但是對于一些小白童鞋來說,最基本的配置都不太知道,剛好利用春節休假期間對webpack4的知識點梳理一次。方便一些剛剛入行的人學習,也是對自己的一種總結與提高
一、幾個盲點的解釋
1、全局安裝與局部安裝
2、安裝包的時候--save與-D的區別
一般我們僅僅是在開發環境依賴的包直接使用-D就可以,這樣就會在項目的package.json文件中的devDependencies新增相關的配置信息
npm install webpack webpack-cli -D
--save是會放在package.json文件的dependencies中
記住僅僅是開發環境需要使用的包就使用-D
二、webpack所謂的0配置使用
webpack是基于配置的前端腳手架,在實際項目中開發需要配置你需要的插件與加載器。
1、webpack最基本的基重要的是:
2、初始化項目
創建一個文件夾webpack-demo
初始化生成package.json文件
npm init --yes
3、安裝webpack最基本的依賴包
npm install webpack webpack-cli -D
4、創建一個文件夾src并在里面創建一個index.js的文件
5、在命令行中運行(先忽視警告信息)
npx webpack
6、在生成的dist文件夾下會生成一個大包好的main.js文件,在該文件夾下創建一個index.html文件引入main.js,在瀏覽器中查看控制臺是否輸出信息。
二、webpack的配置
1、在項目下創建一個webpack.config.js文件
2、可以配置的有
const path = require('path');module.exports = { entry: '', // 打包文件的入口 output: {}, // 打包后的出口文件配置 devServer: {}, // 開發服務器 module: {}, // 模塊配置 plugins: {}, // 插件的配置 mode: 'development', // ['development', 'production']模式 resolve: {}, // 配置解析}三、配置開發環境(在內存中打包)
1、安裝包
npm install webpack-dev-server -D
2、在webpack.config.js中配置入口文件與出口文件
module.exports = { entry: './src/index.js', // 打包文件的入口 output: { filename: 'build.js', // 注意這個位置必須是絕對路徑 path: path.join(__dirname, 'dist') }, ...}3、配置開發devServer
module.exports = { ... devServer: { contentBase: path.join(__dirname, 'dist'), port: 8000, compress: true, // 自動壓縮 open: true, // 自動打開瀏覽器 },}4、在package.json中配置命令
..."scripts": { "dev": "webpack-dev-server",},...5、調試性的運行命令(會自動打開瀏覽器,但是里面沒任何信息展示)
npm run dev
6、使用html-webpack-plugin自動生成html頁面的插件
1.安裝包
npm install html-webpack-plugin -D
2.在webpack.config.js中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');3.在plugins中配置
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack測試', })],4.關于index.html的內容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%=htmlWebpackPlugin.options.title%></title></head><body></body></html>
5.關于html-webpack-plugin的配置請查看
6、運行npm run dev直接打開瀏覽器,打開控制臺可以查看到打印信息
7、創建打包命令(在package.json中添加命令)
"scripts": { "dev": "webpack-dev-server", "build": "webpack"},8、使用哈希值的方式創建隨機生成數字,解決緩存的問題
1、對生成的js文件生成隨機數
output: { filename: 'build.[hash].js', // 默認生成20位的哈希值 // filename: 'build.[hash:8].js' 可以定制生成多少位的隨機數 // 注意這個位置必須是絕對路徑 path: path.join(__dirname, 'dist')},2、對html里面引入的js生成哈希值(會生成?哈希值)
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack測試', hash: true, })],3、運行命令npm run build可以查看dist文件夾下的文件是否帶了尾巴(注意點:要更新文件打包會生成新的,如果沒改動文件,僅僅是多次打包是一樣的)
4、運行后的效果
<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>
9、關于html-webpack-plugin其它常用的配置
new HtmlWebpackPlugin({ ... minify: { removeAttributeQuotes: true, // 去除雙引號 collapseWhitespace: true, // 合并代碼到一行 }})四、清除之前的plugin的插件的使用
我們對每次打包后的緩存文件進行刪除確保每次都是最新的
1、安裝
npm install clean-webpack-plugin -D
2、在webpack.config.js中使用
const CleanWebpackPlugin = require('clean-webpack-plugin');plugins: [ new CleanWebpackPlugin(['./dist']), ...],五、關于webpack入口文件的幾種方式
1、單一入口文件(參考上面)
2、多入口文件(可以寫成一個數組),共同打包帶一個出口文件中
module.exports = { mode: 'development', entry: [ './src/index.js', './src/a.js' ], output: { filename: 'build.[hash:8].js', // 注意這個位置必須是絕對路徑 path: path.join(__dirname, 'dist') }}3、多入口多出口多模板的模式
1.入口文件與出口文件的配置
module.exports = { mode: 'development', entry: { index: './src/index.js', a: './src/a.js' }, output: { filename: '[name].[hash:8].js', path: path.join(__dirname, 'dist') }}2.模板的配置(需要注明輸出文件的名字)
...plugins: [ new CleanWebpackPlugin(['./dist']), new HtmlWebpackPlugin({ filename: 'index.html', // 注明打包后的文件名 template: './src/index.html', title: 'webpack測試1', hash: true, chunks: ['index'] // 注明選擇哪個js文件 }), new HtmlWebpackPlugin({ filename: 'a.html', template: './src/index.html', title: 'webpack測試2', hash: true, chunks: ['a'] }) ],}...六、webpack熱更新的使用
1、根據上面的方式我們可以實現,修改js代碼瀏覽器會刷新,但是是類似我們人工的刷新(如果是有狀態機的數據的時候會丟失數據)
2、我們可以使用webpack自帶的一個熱更新的插件
3、使用方式
1.在webpack.config.js中配置
const webpack = require('webpack');...plugins: [ new webpack.HotModuleReplacementPlugin(), ...]...2.在主要的入口index.js文件中加上
if (module.hot) { module.hot.accept();}七、配置加載css樣式的
webpack默認是支持js的,對于別的css或者typescript必須要安裝加載器
1、安裝包
npm install style-loader css-loader less less-loader -D
2、在webpack.config.js中的module配置規則(use中是一個數組,從后面解析到前面)
...module: { rules: [ { test: //.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: //.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }, ] } ] },...3、在src中創建一個css的文件夾,里面創建a.css和b.less文件
4、在index.js中引入樣式文件
import './css/a.css';import './css/b.less';
5、啟動服務,查看瀏覽器Elements欄
八、抽取成單獨的一個樣式文件
上面的方式雖然可以加載樣式文件,但是加載出來的全部的以<style type="text/css">....</style>的方式到頁面中,增加了js文件的體積,如果項目大,可能會造成js文件過大加載慢,甚至加載不出的弊端。
1、抽取單獨的css目前主要有2個包可以選擇
2、安裝包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
3、使用extract-text-webpack-plugin@next插件的方式
1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');2.修改module中的加載器
module: { rules: [ { test: //.css$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: //.less$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' } ] }) } ]},...3.使用插件
plugins: [ ... new ExtractTextWebpackPligin({ filename: 'css/index.css', }), new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack測試', hash: true, // 先注釋下面的代碼,更好看結果 // minify: { // removeAttributeQuotes: true, // 去除雙引號 // collapseWhitespace: true, // 合并代碼到一行 // } })],4、在index.js中依然是導入css文件
import './css/a.css';import './css/b.less';
4、使用mini-css-extract-plugin插件方式
1.導包
const MiniCssTractPlugin = require('mini-css-extract-plugin');2.在module中配置
module: { rules: [ { test: //.css$/, use: [ MiniCssTractPlugin.loader, { loader: 'css-loader' } ] }, { test: //.less$/, use: [ MiniCssTractPlugin.loader, { loader: 'css-loader' }, { loader: 'less-loader' } ] } ]},3.配置插件
plugins: [ ... new MiniCssTractPlugin({ filename: 'css/css.css', }),]4.一樣的在index.js中導包
5.測試
九、抽取成多個單獨的樣式文件
1、導包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');2、預先實例化兩個輸出文件的對象
const cssExtract = new ExtractTextWebpackPligin('css/a.css');const lessExtract = new ExtractTextWebpackPligin('css/b.css');3、在module中預先實例化的對象
module: { rules: [ { test: //.css$/, use: cssExtract.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: //.less$/, use: lessExtract.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' }, ] }) } ]},4、配置插件
plugins: [ cssExtract, lessExtract, ...]
5、運行命令npm run build查看
十、關于抽取樣式修改后不刷新的問題(開發的時候依然是加上style中)
1.定義disable
const cssExtract = new ExtractTextWebpackPligin({ filename: 'css/a.css',});const lessExtract = new ExtractTextWebpackPligin({ filename: 'css/b.css',});2.在modul中使用
module: { rules: [ { test: //.css$/, use: cssExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' } ] }) }, { test: //.less$/, use: lessExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' }, { loader: 'less-loader' }, ] }) } ]},十一、關于抽取的時候不引入未使用的樣式來簡單打包后的體積
1、安裝包
npm install purifycss-webpack purify-css glob -D
2、導入
const PurifycssWebpack = require('purifycss-webpack');const glob = require('glob');3、使用
...// 注意必須要在HtmlWebpackPlugin后面使用new PurifycssWebpack({ paths: glob.sync(path.resolve('src/*.html'))})...十二、給css3樣式加上前綴
1、使用postcss實現該功能
2、安裝包
npm install postcss-loader autoprefixer -D
3、配置postcss-loader的加載器
...{ test: //.css$/, use: cssExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' }, { loader: 'postcss-loader'}, ] })},...4、項目下新創建一個postcss.config.js的配置文件
module.exports = { plugins: [ require('autoprefixer') ]}5、在a.css中寫上css3的樣式
body { background: cyan; transform:rotate(30deg);}6、執行命令npm run build查看生成的文件
十三、關于更多插件的使用請自己搜索,只要你能想到的就能搜索到的
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
