新手快速上手webpack4打包工具的使用詳解

更新時(shí)間：2019年01月28日 10:14:35 作者：水痕001

這篇文章主要介紹了新手快速上手webpack4打包工具的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一直使用webpack,上次也分享過webpack配置es6~9的語法參考鏈接,但是對于一些小白童鞋來說,最基本的配置都不太知道,剛好利用春節(jié)休假期間對webpack4的知識(shí)點(diǎn)梳理一次。方便一些剛剛?cè)胄械娜藢W(xué)習(xí),也是對自己的一種總結(jié)與提高

一、幾個(gè)盲點(diǎn)的解釋

1、全局安裝與局部安裝

對于一般的新手都有一個(gè)疑惑我是全局安裝還是本項(xiàng)目中安裝(局部安裝),個(gè)人建議,現(xiàn)在前端發(fā)展那么快,我們使用局部安裝的方式更好(使用最新的技術(shù)棧)。
我們知道javascript是弱語言,有局部變量和全局變量,其實(shí)全局安裝與局部安裝的性質(zhì)與函數(shù)的全局變量與局部變量有點(diǎn)類似。

2、安裝包的時(shí)候--save與-D的區(qū)別

一般我們僅僅是在開發(fā)環(huán)境依賴的包直接使用-D就可以,這樣就會(huì)在項(xiàng)目的package.json文件中的devDependencies新增相關(guān)的配置信息

npm install webpack webpack-cli -D

--save是會(huì)放在package.json文件的dependencies中

記住僅僅是開發(fā)環(huán)境需要使用的包就使用-D

二、webpack所謂的0配置使用

webpack是基于配置的前端腳手架,在實(shí)際項(xiàng)目中開發(fā)需要配置你需要的插件與加載器。

1、webpack最基本的基重要的是:

plugins:配置插件的
module:主要配置一些加載器

2、初始化項(xiàng)目

創(chuàng)建一個(gè)文件夾webpack-demo

初始化生成package.json文件

npm init --yes

3、安裝webpack最基本的依賴包

npm install webpack webpack-cli -D

4、創(chuàng)建一個(gè)文件夾src并在里面創(chuàng)建一個(gè)index.js的文件

5、在命令行中運(yùn)行(先忽視警告信息)

npx webpack

6、在生成的dist文件夾下會(huì)生成一個(gè)大包好的main.js文件,在該文件夾下創(chuàng)建一個(gè)index.html文件引入main.js,在瀏覽器中查看控制臺(tái)是否輸出信息。

二、webpack的配置

1、在項(xiàng)目下創(chuàng)建一個(gè)webpack.config.js文件

2、可以配置的有

const path = require('path');

module.exports = {
 entry: '', // 打包文件的入口
 output: {}, // 打包后的出口文件配置
 devServer: {}, // 開發(fā)服務(wù)器
 module: {}, // 模塊配置
 plugins: {}, // 插件的配置
 mode: 'development', // ['development', 'production']模式
 resolve: {}, // 配置解析
}

三、配置開發(fā)環(huán)境(在內(nèi)存中打包)

1、安裝包

npm install webpack-dev-server -D

2、在webpack.config.js中配置入口文件與出口文件

module.exports = {
 entry: './src/index.js', // 打包文件的入口
 output: {
  filename: 'build.js',
  // 注意這個(gè)位置必須是絕對路徑
  path: path.join(__dirname, 'dist')
 },
 ...
}

3、配置開發(fā)devServer

module.exports = {
 ...
 devServer: {
  contentBase: path.join(__dirname, 'dist'),
  port: 8000,
  compress: true, // 自動(dòng)壓縮
  open: true, // 自動(dòng)打開瀏覽器
 },
}

4、在package.json中配置命令

...
"scripts": {
 "dev": "webpack-dev-server",
},
...

5、調(diào)試性的運(yùn)行命令(會(huì)自動(dòng)打開瀏覽器,但是里面沒任何信息展示)

npm run dev

6、使用html-webpack-plugin自動(dòng)生成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.關(guān)于index.html的內(nèi)容

<!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.關(guān)于html-webpack-plugin的配置請查看

6、運(yùn)行npm run dev直接打開瀏覽器,打開控制臺(tái)可以查看到打印信息

7、創(chuàng)建打包命令(在package.json中添加命令)

"scripts": {
 "dev": "webpack-dev-server",
 "build": "webpack"
},

8、使用哈希值的方式創(chuàng)建隨機(jī)生成數(shù)字,解決緩存的問題

1、對生成的js文件生成隨機(jī)數(shù)

output: {
 filename: 'build.[hash].js', // 默認(rèn)生成20位的哈希值
 // filename: 'build.[hash:8].js' 可以定制生成多少位的隨機(jī)數(shù)
 // 注意這個(gè)位置必須是絕對路徑
 path: path.join(__dirname, 'dist')
},

2、對html里面引入的js生成哈希值(會(huì)生成?哈希值)

plugins: [
 new HtmlWebpackPlugin({
 template: './src/index.html',
 title: 'webpack測試',
 hash: true,
 })
],

3、運(yùn)行命令npm run build可以查看dist文件夾下的文件是否帶了尾巴(注意點(diǎn):要更新文件打包會(huì)生成新的,如果沒改動(dòng)文件,僅僅是多次打包是一樣的)

4、運(yùn)行后的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>

9、關(guān)于html-webpack-plugin其它常用的配置

new HtmlWebpackPlugin({
 ...
 minify: {
  removeAttributeQuotes: true, // 去除雙引號
  collapseWhitespace: true, // 合并代碼到一行
 }
})

四、清除之前的plugin的插件的使用

我們對每次打包后的緩存文件進(jìn)行刪除確保每次都是最新的

1、安裝

npm install clean-webpack-plugin -D

2、在webpack.config.js中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
 new CleanWebpackPlugin(['./dist']),
 ...
],

五、關(guān)于webpack入口文件的幾種方式

1、單一入口文件(參考上面)

2、多入口文件(可以寫成一個(gè)數(shù)組),共同打包帶一個(gè)出口文件中

module.exports = {
 mode: 'development',
 entry: [
  './src/index.js',
  './src/a.js'
 ],
 output: {
  filename: 'build.[hash:8].js',
  // 注意這個(gè)位置必須是絕對路徑
  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'] // 注明選擇哪個(gè)js文件
  }),
  new HtmlWebpackPlugin({
   filename: 'a.html',
   template: './src/index.html',
   title: 'webpack測試2',
   hash: true,
   chunks: ['a']
  })
 ],
}
...

六、webpack熱更新的使用

1、根據(jù)上面的方式我們可以實(shí)現(xiàn),修改js代碼瀏覽器會(huì)刷新,但是是類似我們?nèi)斯さ乃⑿?如果是有狀態(tài)機(jī)的數(shù)據(jù)的時(shí)候會(huì)丟失數(shù)據(jù))

2、我們可以使用webpack自帶的一個(gè)熱更新的插件

3、使用方式

1.在webpack.config.js中配置

const webpack = require('webpack');
...
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  ...
]
...

2.在主要的入口index.js文件中加上

if (module.hot) {
 module.hot.accept();
}

七、配置加載css樣式的

webpack默認(rèn)是支持js的,對于別的css或者typescript必須要安裝加載器

1、安裝包

npm install style-loader css-loader less less-loader -D

2、在webpack.config.js中的module配置規(guī)則(use中是一個(gè)數(shù)組,從后面解析到前面)

...
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中創(chuàng)建一個(gè)css的文件夾,里面創(chuàng)建a.css和b.less文件

4、在index.js中引入樣式文件

import './css/a.css';
import './css/b.less';

5、啟動(dòng)服務(wù),查看瀏覽器Elements欄

八、抽取成單獨(dú)的一個(gè)樣式文件

上面的方式雖然可以加載樣式文件,但是加載出來的全部的以<style type="text/css">....</style>的方式到頁面中,增加了js文件的體積,如果項(xiàng)目大,可能會(huì)造成js文件過大加載慢,甚至加載不出的弊端。

1、抽取單獨(dú)的css目前主要有2個(gè)包可以選擇

使用插件extract-text-webpack-plugin@next
使用插件mini-css-extract-plugin(今后取代上面那個(gè)插件的包)

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,
  // 先注釋下面的代碼,更好看結(jié)果
  // minify: {
  //  removeAttributeQuotes: true, // 去除雙引號
  //  collapseWhitespace: true, // 合并代碼到一行
  // }
 })
],

4、在index.js中依然是導(dǎo)入css文件

import './css/a.css';
import './css/b.less';

4、使用mini-css-extract-plugin插件方式

1.導(dǎo)包

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中導(dǎo)包

5.測試

九、抽取成多個(gè)單獨(dú)的樣式文件

1、導(dǎo)包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');

2、預(yù)先實(shí)例化兩個(gè)輸出文件的對象

const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');

3、在module中預(yù)先實(shí)例化的對象

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、運(yùn)行命令npm run build查看

十、關(guān)于抽取樣式修改后不刷新的問題(開發(fā)的時(shí)候依然是加上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' },
    ]
   })
  }
 ]
},

十一、關(guān)于抽取的時(shí)候不引入未使用的樣式來簡單打包后的體積

1、安裝包

npm install purifycss-webpack purify-css glob -D

2、導(dǎo)入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');

3、使用

...
// 注意必須要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
 paths: glob.sync(path.resolve('src/*.html'))
})
...

十二、給css3樣式加上前綴

1、使用postcss實(shí)現(xiàn)該功能

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、項(xiàng)目下新創(chuàng)建一個(gè)postcss.config.js的配置文件

module.exports = {
 plugins: [
  require('autoprefixer')
 ]
}

5、在a.css中寫上css3的樣式

body {
 background: cyan;
 transform:rotate(30deg);
}

6、執(zhí)行命令npm run build查看生成的文件

十三、關(guān)于更多插件的使用請自己搜索,只要你能想到的就能搜索到的

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

新手快速上手webpack4打包工具的使用詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具