簡單了解webpack打包流程

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了webpack打包流程的相關問題，webpack是一個用於現代JavaScript應用程式的靜態模組打包工具，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##webpack ：是一個用於現代JavaScript 應用程式的 靜態模組打包工具。當webpack 處理應用程式時，它會在內部從一個或多個入口點建立一個 依賴圖(dependency graph)，然後將你專案中所需的每一個模組組合成一個或多個 bundles，它們都是靜態資源，用來展示你的內容。

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現後，Webpack還肩負起了優化專案的責任。

這段話有三個重點：

• 打包：可以把多個Javascript文件打包成一個文件，減少伺服器壓力和下載頻寬。

• 轉換：將拓展語言轉換成普通的JavaScript，讓瀏覽器順利運作。

• 優化：前端變的越來越複雜後，效能也會遇到問題，而WebPack也開始肩負起了優化和提升效能的責任

#1、建立一個新項目，然後執行

npm init

2 、全域安裝webpack以及webpack-cil

npm install -g webpack

npm install -g webpack-cil

3、將webpack安裝到專案依賴，這樣就可以使用本機版的webpack

npm install webpack -save-dev

npm install webpack-cil -save-dev

4、建立最外層的webpack.config.js，改變預設值

作用：是為了方便不用每次打包的時候都輸入目錄位址，而是直接webpack即可

const path = require('path');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {

mode: 'development',

entry: './src/index.js', // 指定打包入口文件

output: {

filename: 'index.js', // 指定打包输出文件名

path: path.resolve(__dirname, './public'), // 指定打包输出路径

},

module: { // 对模块的处理逻辑

rules: [ // 一系列的加载器的处理逻辑

{

test: /\.css$/, // 正则 匹配到文件后缀

use: [

'style-loader',

'css-loader',

], // 用此加载器处理匹配到的文件

exclude: [ // 排除此文件夹下的文件

path.resolve(__dirname, './node_modules')

]

}

],

},

resolve: {

extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀

},

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

minify: {

removeAttributeQuotes: true,

},

hash: true,

}),

new webpack.EnvironmentPlugin(

{

NODE_ENV: 'development',

TEST: 'true',

}

),

new CopyPlugin({

patterns: [

{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},

],

}),

],

// 配置webpack服务

devServer: {

port: 8000, // 启动服务监听端口

host: 'localhost', // 可以通过localhost访问

open: true, // 自动打开浏览器

hot: true, // 启动热更新

},

};

5 、安裝HtmlWebpackPlugin 

#這個外掛程式將為你產生一個HTML5 文件， 在body 中使用 

script 標籤引入你所有webpack 產生的bundle。只要加入該插件到你的webpack 設定中

npm install --save-dev html-webpack-plugin

6、安裝CopyWebpackPlugin

該外掛程式是將需要的檔案打包copy到你所需要的地方，我之所以安裝此插件，是因為我打完包之後，css並沒有打包成功，之後嘗試了很多方式還是沒有成功，只能手動執行這個將css包copy過去

npm install copy-webpack-plugin --save-dev // 安装

// 使用from 和to就是將form地方的檔案copy到to地方

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

plugins: [

new CopyPlugin({

patterns: [

{ from: "source", to: "dest" },

{ from: "other", to: "public" },

],

}),

],

}; // webpack.config.js

7、兩種打包方法

webpack --mode development // 开发模式 不压缩

webpack --mode production // 生产模式 压缩

8、安裝webpack-dev-server

npm install --save-dev webpack webpack-dev-server

const Webpack = require('webpack');

const WebpackDevServer = require('webpack-dev-server');

9、進行打包之後，啟動專案：

"scripts": {

"test": "mocha",

"start": "webpack-dev-server",

"dev": "webpack --mode development"

},// 在package.json 里面进行配置

// 然后执行

npm run start // 项目启动&热更新

npm run dev // 再次打包

npm run test // 执行测试

【相關推薦：

javascript影片教學、web前端】

以上是簡單了解webpack打包流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！