前言

最近應(yīng)腳手架搭建，工程打包是基于webpack來操作，以前在學(xué)習(xí)Vue的時(shí)候也是用到的他雖然大致明白工作流程以及原理，但是這種東西實(shí)操一遍收獲那是杠杠的呀，比起看文章啥的那理解一下就上來了，小編就在此分享一下從零搭建一個(gè)webpack項(xiàng)目。

開始大話

---

何為webpack？

概念

JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，應(yīng)官網(wǎng)的一句話而言打包所有資源、腳本、樣式、圖片，將我們復(fù)雜的工程目錄文件打包成一個(gè)輕量級(jí)的幾個(gè)簡(jiǎn)略文件。

webpack核心

• 入口文件配置 (enpty)

• 出口文件配置 (output)

• 模塊轉(zhuǎn)換器 (loader)

• 插件 (plugins)

---

構(gòu)建項(xiàng)目

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

那么依據(jù)小編自身的流程我們創(chuàng)建 webpack-project 文件，安裝webpack插件

mkdir webpack-project cd webpack-project // 初始化文件 npm init npm install webpack webpack-cli -D

我們先新建一下所需要的文件，下面是文件結(jié)構(gòu)

├── public└── index.html ├── src└──index.js // 入口文件 ├──.babelrc ├──package.json ├──webpack.config.js //

我們先準(zhǔn)備一下啟動(dòng)命令，process.env 中默認(rèn)并沒有 NODE_ENV，這里配置下我們的 package.json 的 scripts,先安裝一下cross-env。
npm install cross-env -D
在配置一下package.json中的scripts

// package.json "scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server","build": "cross-env NODE_ENV=production webpack" },

二、轉(zhuǎn)義JS

轉(zhuǎn)義js也是webpack所要實(shí)現(xiàn)的，主要用于將ECMAScript2015+版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。
我們安裝以及配置一下 babel 依賴

npm install babel-loader -D npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D npm install @babel/runtime @babel/runtime-corejs3 -D

然后我們轉(zhuǎn)到 webpack.config.js文件里面配置一下babel，節(jié)約空間我們也在這里配置一下入口出口文件

const path = require('path'); module.exports = {module: {entry: './src/index.js', //同樣也是webpack的默認(rèn)配置，設(shè)置可以是字符串可以是數(shù)組也可以是對(duì)象output: {path: path.resolve(__dirname, 'dist'), //必須是絕對(duì)路徑filename: 'main.[hash:6].js',},rules: [{// babel搜尋文件目錄下.js后綴文件轉(zhuǎn)義test: /\.jsx?$/,use: ['babel-loader'],exclude: /node_modules/ //排除 node_modules 目錄}],} }

同時(shí)我們配置一下 .babelrc文件，也是對(duì)babel依賴進(jìn)行配置

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-transform-runtime",{"corejs": 3}]] }

這里我們?cè)?src/main.js 中隨意寫一些東西，然后控制臺(tái)使用npm run build，就可以看到我們的工程目錄多了一個(gè)dist文件夾，那里面就是壓縮包裝好了的文件（ main.[hash:6]js 文件我是這樣去隨機(jī)命名的），我們可以從中找到 index.js中對(duì)應(yīng)轉(zhuǎn)義代碼位置

至此我們實(shí)現(xiàn)了對(duì)入口js文件的轉(zhuǎn)義以及打包命令的配置

三、mode 配置項(xiàng)

mode項(xiàng)就是告知webpack以怎樣的模式去運(yùn)行我們這邊選擇開發(fā)模式。我們加到 webpack.config.js文件中去

module.exports = {mode: "development",// ...... }

四、瀏覽器查看項(xiàng)目

瀏覽器中查看我們通過 html-webpack-plugin 插件實(shí)現(xiàn)，同時(shí)也安裝一下 webpack-dev-server 那樣我們的項(xiàng)目就可以在本地服務(wù)器上跑起來了

npm install html-webpack-plugin -D npm install webpack-dev-server -D

我們找到 public/index.html 把html骨架調(diào)出來 !+tab (內(nèi)容寫不寫無所謂不影響調(diào)試)。

修改 webpack.config.js 文件，引入該插件。webpack-dev-server也有幾個(gè)比較關(guān)鍵的配置項(xiàng)

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {plugins: [//數(shù)組 放著所有的webpack插件new HtmlWebpackPlugin({template: './public/index.html',filename: 'index.html', //打包后的文件名minify: {removeAttributeQuotes: false, //是否刪除屬性的雙引號(hào)collapseWhitespace: false, //是否折疊空白},})],devServer: {port: '8000', //默認(rèn)是8080quiet: false, //默認(rèn)不啟用inline: true, //默認(rèn)開啟 inline 模式，如果設(shè)置為false,開啟 iframe 模式stats: "errors-only", //終端僅打印 erroroverlay: false, //默認(rèn)不啟用clientLogLevel: "silent", //日志等級(jí)}}

我們到這一步 使用 npm run dev就可以通過瀏覽器在我們?cè)O(shè)置的端口中查看項(xiàng)目了，因?yàn)楝F(xiàn)在工程沒有同步功能所以每一次修改都還是要重新build一下在啟動(dòng)，但是還要一個(gè)小問題就是我們可以看到代碼出入信息位置是給的打包后的位置， 通過在webpack.config.js中定義實(shí)現(xiàn)devtool

module.exports = {devtool: 'cheap-module-eval-source-map' //開發(fā)環(huán)境下使用 }

這樣我們輸出代碼就可以直接定位到原始代碼位置

五、處理樣式文件

那么頁面、js文件我們都處理好了，那么怎么導(dǎo)入樣式文件呢，webpack本身沒有提供解析方法，所以我們還是借助插件，預(yù)處理語言肯定也是我們要考慮的 Less Sass

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

配置一下 webpack.config.js 文件

//webpack.config.js module.exports = {//...module: {rules: [{test: /\.(le|c)ss$/,use: ['style-loader', 'css-loader', {loader: 'postcss-loader',options: {plugins: function () {return [require('autoprefixer')({"overrideBrowserslist": [">0.25%","not dead"]})]}}}, 'less-loader'],exclude: /node_modules/}]} }

六、導(dǎo)入資源文件

本地資源導(dǎo)入在webpack中是不可以直接導(dǎo)入的，安裝依賴

npm install url-loader -D npm install file-loader -D

配置webpack.config.js 文件

//webpack.config.js module.exports = {//...modules: {rules: [{test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,use: [{loader: 'url-loader',options: {limit: 10240, //限制一下圖片大小，超過了的話就直接放到打包后資源目錄下esModule: false name: '[name]_[hash:6].[ext]',outputPath: 'assets' // 靜態(tài)資源打包后投放地}}],exclude: /node_modules/}]} }

七、html中導(dǎo)入圖片

逐漸調(diào)試熟練 小編就省略一些文字

npm install html-withimg-loader -D module.exports = {//...module: {rules: [{test: /.html$/,use: 'html-withimg-loader'}]} }

我們可以在public/index.html中寫入img標(biāo)簽導(dǎo)入試一下效果

八、打包前清空目錄

npm install clean-webpack-plugin -D

//webpack.config.js const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {plugins: [//不需要傳參數(shù)new CleanWebpackPlugin() ] }

完善搭建

一、靜態(tài)資源調(diào)用

在主頁中引入已有的靜態(tài)資源文件，我們?cè)趐ublic欄中放入js文件夾(用于存放已有的靜態(tài)資源文件)，index文件直接引入，那可不會(huì)允許你這樣。webpack：我都已經(jīng)跟你把轉(zhuǎn)義和輸出都寫好了，你還自己引入文件，我才不在幫你把外部文件再轉(zhuǎn)義好加進(jìn)來了呢，太麻煩我了？那只能再給他買上禮物(安裝插件)，安撫一下了。

該插件我們實(shí)現(xiàn)將我們的靜態(tài)資源目錄拷貝到我們打包后的dist文件目錄下，打包后就直接調(diào)用。

npm install copy-webpack-plugin -D

同樣的引入之后我們配置一下webpack.config.js文件

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = {plugins: [new CopyWebpackPlugin([{from: 'public/js/*.js',to: path.resolve(__dirname, 'dist', 'js'),flatten: true, // 該參數(shù)設(shè)置拷貝時(shí)不會(huì)把整個(gè)文件目錄拷貝下來},], {ignore: ['alone.js'] // 這邊是篩選參數(shù)，寫進(jìn)去public下該文件不會(huì)被拷貝過去，可以沒有需求可以不設(shè)置})] }

二、抽離CSS文件并壓縮

我們知道沒有抽離出來CSS文件打包，打包后樣式實(shí)現(xiàn)是最后的js文件去實(shí)現(xiàn)，這樣可以分擔(dān)一下打包成的js文件的容量，同樣的抽離出來的CSS文件我們也進(jìn)行依稀壓縮，導(dǎo)入插件

npm install mini-css-extract-plugin -D

再次配置一下webpack.config.js文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = {plugins: [new MiniCssExtractPlugin({filename: 'css/[name].css'})],module: {rules: [{test: /\.(le|c)ss$/,use: [MiniCssExtractPlugin.loader, //替換之前的 style-loader'css-loader', {loader: 'postcss-loader',options: {plugins: function () {return [require('autoprefixer')({"overrideBrowserslist": ["defaults"]})]}}}, 'less-loader'],exclude: /node_modules/}]} }

引入壓縮插件

npm install optimize-css-assets-webpack-plugin -D

然后配置引用一下該插件

//webpack.config.js const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');module.exports = {plugins: [// 這邊直接調(diào)用就好了不需要調(diào)配什么參數(shù)new OptimizeCssPlugin()], }

三、熱更新

這是打包工具必備的一個(gè)功能，能讓我們修改代碼保存以后自動(dòng)更新，webpack插件中包含此功能對(duì)象我們直接調(diào)用

//webpack.config.js const webpack = require('webpack'); module.exports = {//....devServer: {hot: true},plugins: [new webpack.HotModuleReplacementPlugin() //熱更新插件] }

四、多界面應(yīng)用打包

到目前為止頁面的功能已經(jīng)是基本完善，那么多頁面webpack又是如何處理的呢？我們直接定義多個(gè)入口文件實(shí)現(xiàn)多頁面打包，在配置頁面的時(shí)候我們要加上chunks參數(shù)配置，要不然界面會(huì)將入口js文件都加載而沒辦法對(duì)應(yīng)。

//webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: {index: './src/index.js',login: './src/login.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[hash:6].js'},//...plugins: [new HtmlWebpackPlugin({template: './public/index.html',filename: 'index.html', //打包后的文件名chunks: ['index']}),new HtmlWebpackPlugin({template: './public/login.html',filename: 'login.html', //打包后的文件名chunks: ['login']}),] }

總結(jié)

到這里我們的webpack工具項(xiàng)目就已經(jīng)做到了轉(zhuǎn)義、樣式、資源導(dǎo)入以及存放基本雛形已經(jīng)有了，后續(xù)學(xué)習(xí)會(huì)繼續(xù)完善分享更多關(guān)于該webpack的完善

總結(jié)

以上是生活随笔為你收集整理的「大话webpack」从零搭建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。