前言

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

開始大話

---

何為webpack？

概念

JavaScript 應用程序的靜態模塊打包器，應官網的一句話而言打包所有資源、腳本、樣式、圖片，將我們復雜的工程目錄文件打包成一個輕量級的幾個簡略文件。

webpack核心

• 入口文件配置 (enpty)

• 出口文件配置 (output)

• 模塊轉換器 (loader)

• 插件 (plugins)

---

構建項目

一、初始化項目

那么依據小編自身的流程我們創建 webpack-project 文件，安裝webpack插件

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

我們先新建一下所需要的文件，下面是文件結構

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

我們先準備一下啟動命令，process.env 中默認并沒有 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" },

二、轉義JS

轉義js也是webpack所要實現的，主要用于將ECMAScript2015+版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
我們安裝以及配置一下 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

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

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

同時我們配置一下 .babelrc文件，也是對babel依賴進行配置

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

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

至此我們實現了對入口js文件的轉義以及打包命令的配置

三、mode 配置項

mode項就是告知webpack以怎樣的模式去運行我們這邊選擇開發模式。我們加到 webpack.config.js文件中去

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

四、瀏覽器查看項目

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

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

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

修改 webpack.config.js 文件，引入該插件。webpack-dev-server也有幾個比較關鍵的配置項

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

我們到這一步 使用 npm run dev就可以通過瀏覽器在我們設置的端口中查看項目了，因為現在工程沒有同步功能所以每一次修改都還是要重新build一下在啟動，但是還要一個小問題就是我們可以看到代碼出入信息位置是給的打包后的位置， 通過在webpack.config.js中定義實現devtool

module.exports = {devtool: 'cheap-module-eval-source-map' //開發環境下使用 }

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

五、處理樣式文件

那么頁面、js文件我們都處理好了，那么怎么導入樣式文件呢，webpack本身沒有提供解析方法，所以我們還是借助插件，預處理語言肯定也是我們要考慮的 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/}]} }

六、導入資源文件

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

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' // 靜態資源打包后投放地}}],exclude: /node_modules/}]} }

七、html中導入圖片

逐漸調試熟練 小編就省略一些文字

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

我們可以在public/index.html中寫入img標簽導入試一下效果

八、打包前清空目錄

npm install clean-webpack-plugin -D

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

完善搭建

一、靜態資源調用

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

該插件我們實現將我們的靜態資源目錄拷貝到我們打包后的dist文件目錄下，打包后就直接調用。

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, // 該參數設置拷貝時不會把整個文件目錄拷貝下來},], {ignore: ['alone.js'] // 這邊是篩選參數，寫進去public下該文件不會被拷貝過去，可以沒有需求可以不設置})] }

二、抽離CSS文件并壓縮

我們知道沒有抽離出來CSS文件打包，打包后樣式實現是最后的js文件去實現，這樣可以分擔一下打包成的js文件的容量，同樣的抽離出來的CSS文件我們也進行依稀壓縮，導入插件

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: [// 這邊直接調用就好了不需要調配什么參數new OptimizeCssPlugin()], }

三、熱更新

這是打包工具必備的一個功能，能讓我們修改代碼保存以后自動更新，webpack插件中包含此功能對象我們直接調用

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

四、多界面應用打包

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

//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']}),] }

總結

到這里我們的webpack工具項目就已經做到了轉義、樣式、資源導入以及存放基本雛形已經有了，后續學習會繼續完善分享更多關于該webpack的完善

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。