webpack最佳入門實踐系列(2)
3.插件
在前端迅速發展的今天，許多沒有太多技術含量並且感覺是在浪費時間的事情，就可以交給構建工具來做，例如：我們去手動創建index.html,手動引入打包好的js文件等操作，都可以叫個webpack來做，幫助我們提升效率，因此，你只需要理解，插件其實就是webpack的一些擴展功能，旨在幫助我們提示效率的工具
3.1.html-webpack-plugin插件
這個插件就是幫我們自動生成html文件並且自動引入打包好的js文件
1.插件安裝
npm install html-webpack-plugin --save-dev
2.修改webpack配置，讓插件生效
const path = require(‘path‘)
// 引入插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: ‘./src/index.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘app.js‘
},
plugins: [
//添加插件
new HtmlWebpackPlugin()
]
}
3.運行查看效果
npm run dev
4.其他常用配置項目
const path = require(‘path‘)
// 引入插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: ‘./src/index.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘app.js‘
},
plugins: [
//添加插件
new HtmlWebpackPlugin(
//在這個插件內部，可以指定模版和自定義生成的文件名
{
filename: ‘main.html‘,
template: ‘src/index.html‘
}
)
]
}
有了上面兩個配置後，這個插件幫助生成一個main.html，並且是基於template生成的
4.devserver
webpack-dev-server 為你提供了一個簡單的 web 服務器，並且能夠實時重新加載(live reloading)。
4.1.安裝webpack-dev-server
npm install webpack-dev-server --save-dev
修改package.json配置文件，在script選項中加入下面代碼：
"start": "webpack-dev-server",
整個package.json配置文件如下：
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "./node_modules/webpack/bin/webpack.js",
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0"
}
}
在終端運行命令：
npm start
命令啟動後，通過http://localhost:8080/ 訪問
4.2.讓工具自動給我們打開服務器地址
在webpack.config.js中添加配置
devServer:{
open: true
}
其中open:true 表示自動打開瀏覽器
4.3.修改服務器端口
在webpack.config.js中添加配置項目
devServer:{
open: true,
port: 8090
}
其中port後面給一個自定義端口
4.4.設置默認訪問目錄
devServer:{
open: true,
port: 8090,
contentBase: ‘./dist‘
}
5.loader
5.1.什麽是loader？
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。
本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖可以直接引用的模塊。
在更高層面，在 webpack 的配置中 loader 有兩個目標。
- 識別出應該被對應的 loader 進行轉換的那些文件。(使用 test 屬性)
- 轉換這些文件，從而使其能夠被添加到依賴圖中（並且最終添加到 bundle 中）(use 屬性)
總結：有了loader，webpack就會把非js文件也看成是模塊，並且可以引用它
5.2.支持css文件打包
安裝css-loader
npm install css-loader --save-dev
修改webpack.config.js文件，添加css-loader配置項
module:{
rules: [
{
test: /\.css$/,
use: [‘css-loader‘]
}
]
}
完整webpack.config.js文件：
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘app.js‘
},
plugins: [
new HtmlWebpackPlugin({
template:‘./src/index.html‘,
filename:‘index.html‘
})
],
devServer:{
open: true,
contentBase: ‘./dist‘
},
module:{
rules: [
{
test: /\.css$/,
use: [‘css-loader‘]
}
]
}
}
配置完成後，測試是否生效，首先新建index.css，添加內容：
body{
background: #009f95
}
在index.js文件中引入 index.css文件
import module_1 from ‘./module_1‘
import module_2 from ‘./module_2‘
import module_3 from ‘./module_3‘
document.write("hello world")
import "./index.css"
module_1()
module_2()
module_3()
運行命令，查看效果：
npm start
此時，發現並沒有任何效果，原因是css-loader只負責把css文件打包到js中，並沒有加入到index.html結構中， 還需要引入style-loader來處理，讓style樣式加入到index.html結構中
npm install style-loader --save-dev
接下來，需要把style-loader配置到webpack.config.js文件中
module:{
rules: [
{
test: /\.css$/,
use: [‘style-loader‘,‘css-loader‘]
}
]
}
再次運行 npm start 查看效果
webpack最佳入門實踐系列(2)