前言:
webpack 超級實用前端環境搭建
一、我們日常使用的前端開發環境應該是怎樣的?
- 構建我們需要發布的html,css ,js 文件
- 使用css 預處理器來編寫樣式
- 處理壓縮圖片
- 使用Bable支持ES新特性
- 本地提供靜態環境開發調試
二、關聯HTML
webpack 默認從作為入口的 .js 文件進行構建(更多是基於 SPA 去考慮),但通常一個前端項目都是從一個頁面(即 HTML)出發的,最簡單的方法是,創建一個 HTML 文件,使用 script 標簽直接引用構建好的 JS 文件
<script src="./dist/bundle.js"></script>
但是,如果我們的文件名或者路徑會變化,so 我們使用 html-webpack-plugin 插件
html-webpack-plugin 是一個獨立的 node package,所以在使用之前我們需要先安裝它,把它安裝到項目的開發依賴中:
npm install html-webpack-plugin -D
然后在 webpack 配置中,將 html-webpack-plugin 添加到 plugins 列表中:(默認版配置)
cosnt HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//...
Plugins:[
new HtmlWebpackPlugin (),
]
}
然而默認配置,並沒有什么用哦。這時候我們需要一個實踐項目版
const HtmlWebpackPlugin = require('html=webpack-plugin')
module.exports = {
//...
Plugins:[
new HtmlWebpackPlugin ({
filename:'index.html' //配置輸出文件名和路徑
template:'assets/index.html' ,//配置文件模板
}),
],
}
嘿,我們實際項目怎么可能只有一個HTML文件了。這時候我們再來一個 多個頁面版
官方提供的例子是這樣的
const HtmlWebpackPlugin = require('html=webpack-plugin')
module.exports = {
//...
Plugins:[
new HtmlWebpackPlugin ({
filename:'index.html' //配置輸出文件名和路徑
template:'assets/index.html' ,//配置文件模板
}),
new HtmlWebpackPlugin ({ filename:'address.html' //配置輸出文件名和路徑 template:'assets/index.html' ,//配置文件模板 }),
],
}
到這里,應該滿足大部分需求了,但但但是,,,,,, 我還想提供另外一種。
webpack的入口文件是多個的,生成多個HTML文件。不廢話 上代碼
const HtmlWebpackPlugin = require('html-webpack-plugin)
var entries = './src/entry/**/**/*.js' //多入口文件
//敲黑板
for(var pathname in entries){
var conf ={
filename:"dist/pages/"+ pathname + ".html",
template:'index.html' ,
hash:false
}
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}
三、構建css
嘻嘻,我們在編寫css,並且希望使用webpack來進行構建,為此我們需要配置中引入loader來解析和處理css 文件,嘿朋友要記得安裝 style-loader和css-loader 哦
module.exports = {
module: {
rules: [
// ...
{
test: /\.css/,
include: [
path.resolve(__dirname, 'src'),
],
use: [
'style-loader',
'css-loader',
],
},
],
}
}
那就創建一個index.css 文件,並在index.js 中引用它,然后進行構建呀
//在index.js 中哦
import './index.css'
發現運行和沒有瞧見index.css 啊(有點急人啊)
- css-loader 負責解析 CSS 代碼,主要是為了處理 CSS 中的依賴,例如 @import 和 url() 等引用外部文件的聲明;
- style-loader 會將 css-loader 解析的結果轉變成 JS 代碼,運行時動態插入 style 標簽來讓 CSS 代碼生效。
經由上述兩個 loader 的處理后,CSS 代碼會轉變為 JS,和 index.js 一起打包了。如果需要單獨把 CSS 文件分離出來,我們需要使用 extract-text-webpack-plugin 插件。
const ExtactTextPlugin = reuire('extact-text-plugin')
module.exports = {
//...
module:{
rules:[
{
test:/\.css$/,
// 因為這個插件需要干涉模塊轉換的內容,所以需要要使用它對應的loader
use:ExtractTextPlugin.extrract({
fallbac:'style-laoder',
use:'css-loader',
})
}
]
},
plugins:[
// 引入插件,配置文件名,可以使用hash
new ExtracttextPlugin('index.css'),
],
}
可要注意了,實際項目不會只有一個css文件呀。
ExtractTextPlugin
對 每個入口 chunk 都生成一個對應的文件,所以當你配置多個入口 chunk 的時候,你必須使用 [name]
, [id]
或 [contenthash]
//貼出官方給的多個實例的代碼
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 創建多個實例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
},
{
test: /\.less$/i,
use: extractLESS.extract([ 'css-loader', 'less-loader' ])
},
]
},
plugins: [
extractCSS,
extractLESS
]
};
四、css 預處理器
在上述使用 CSS 的基礎上,通常我們會使用 Less/Sass 等 CSS 預處理器,webpack 可以通過添加對應的 loader 來支持,以使用 Less 為例,我們可以在官方文檔中找到對應的 loader。
嘿,我是用less.
那我們在webpack配置中,添加一個支持解析后綴為.less的文件
module.exports = {
// ...
module: {
rules: [
{
test: /\.less$/,
// 因為這個插件需要干涉模塊轉換的內容,所以需要使用它對應的 loader
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'less-loader',
],
}),
},
],
},
// ...
}
五、處理圖片文件
在前端項目的樣式中總會使用到圖片,雖然我們已經提到 css-loader 會解析樣式中用 url() 引用的文件路徑,但是圖片對應的 jpg/png/gif 等文件格式,webpack 處理不了。是的,我們只要添加一個處理圖片的 loader 配置就可以了,現有的 file-loader 就是個不錯的選擇。
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
}
六、font 類型處理
來來來 說到這里 我說一個坑:升級了element UI 框架 總是報錯,我去font 沒有處理
module.exports = {
// ...
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
},
],
},
],
},
}
七、使用Babel
Babel 是一個讓我們能夠使用 ES 新特性的 JS 編譯工具,我們可以在 webpack 中配置 Babel,以便使用 ES6、ES7 標准來編寫 JS 代碼。
module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?/, // 支持 js 和 jsx
include: [
path.resolve(__dirname, 'src'), // src 目錄下的才需要經過 babel-loader 處理
],
loader: 'babel-loader',
},
],
},
}
八、啟動靜態服務
我們完成了處理多種文件類型的 webpack 配置。我們可以使用 webpack-dev-server 在本地開啟一個簡單的靜態服務來進行開發
在項目下安裝 webpack-dev-server,然后添加啟動命令到 package.json 中:
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
}
哇,到最后啦
運行 npm run start
http://localhost:8080/
后言:
在多頁面項目下使用Webpack+Vue 了解一下,很詳細的介紹了每一個配置,我們項目實際開發用到的(剝離,剝離出來)
https://github.com/FannieGirl/Build-a-development-environment