Webpack打包機制的初步學習

時間 2019-12-10

標籤 webpack 打包機制初步學習简体版

原文原文鏈接

webpack的安裝

首先在全局環境安裝webpack，安裝webpack以前須要安裝node（node的安裝就不在這裏詳解了，沒有安裝或不知道怎麼安裝的能夠去網上搜索）。css

$ npm install -g webpack

安裝webpack完成後，新建一個webpackTest文件夾做爲項目所在目錄，在項目的根目錄新建一個index.html文件，並引入一個js文件bundle.js（如今還不知道這個文件是幹嗎的，後期就會了解並使用它），bundle.js的文件是自定義的，任何名稱均可以。html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack打包工具</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

初始化webpack

安裝完成webpack以後，在終端裏面進入webpackTest目錄，使用命令（npm init）對項目進行初始化。初始化後會生成package.json文件，後期對項目安裝的依賴包、項目的啓動等操做都會在package.json文件裏面配置。vue

$ npm init

運行webpack進行打包

在項目的根目錄webpackTest下面新建一個app.js文件，做爲webpack打包整個項目的入口文件，打包後會生成一個目標文件bundle.js（index.html裏面引入的bundle.js就是這兒生成的）。node

在終端裏面進入項目的根目錄，使用命令進行打包：jquery

$ webpack app.js bundle.js

打包完成後就會生成目標文件bundle.js，在app.js文件裏面寫入代碼，用瀏覽器打開index.html文件查看效果。webpack

alert("Hello World!");

可是這時候每次修改app.js的內容後都須要使用webpack打包一次，才能更新目標文件bundle.js。這樣就比較麻煩，若是咱們對打包動做進行監聽，只要app.js內容改變，就自動打包更新bundle.js內容，只須要給打包命令添加一個--watch參數就能夠了：es6

$ webpack app.js bundle.js --watch

如何將JS進行模塊化

將js進行模塊化的時候須要用到module.exports輸出和require引入，js中全部的數據格式均可以使用module.exports進行輸出（字符串、數組、對象等），在須要調用的js文件裏面使用require引入後就可使用了。web

咱們在根目錄新建一個people.js文件，在裏面添加內容：npm

let people=[{name:"Herry"},{name:"Ocean"},{name:"Leo"}]; module.exports = people;

在app.js裏面引入people.js文件,這時候就可使用people.js裏面的全部被module.xeposrts拋出的內容了，在刷新瀏覽器就能夠查看修改內容：json

let people = require("./people.js"); alert(people[0].name);

注意：咱們使用模塊化的js文件的時候分外用戶自定義的與經過npm下載的第三方文件，若是是用戶自定義的js文件，引入的時候須要寫完整的相對路徑，若是是使用npm下載的第三方js文件，引入的時候就只須要寫文件名。

用戶自定義people.js：require(「./people.js」)；

使用npm下載的第三方jquery.js文件：require(「jquery」)；

如何引入第三方插件

在項目開發的時候，不少時候咱們都須要使用第三方插件，如jquery、bootstrap等等，因此對於第三方插件的使用也是很是重要的。使用第三方插件前咱們須要經過npm下載插件：（npm install 能夠簡寫爲npm i）

$ npm i jquery

而後在app.js裏面引入jquery，修改app.js代碼以下，完成後在瀏覽器查看效果：

let people = require("./people.js"); let $ = require("jquery"); $.each(people, function(key, value){ $("body").append("<h1>"+people[key].name+"</h1>") }

如何將es6轉換爲es5

因爲如今es6的流行，不少項目js文件都會使用es6格式進行編寫，而有些瀏覽器因爲不可以徹底支持es6，因此項目上線的時候須要使用babel等工具將es6轉換爲es5格式作到更好的兼容全部的瀏覽器，下面咱們主要使用label進行轉換。

轉換依賴的文件主要有babel-core、babel-loader和babel-preset-es2015（這兒還只是準備工做，看不到效果，到後面咱們就能夠看效果了）

$ npm i babel-core babel-loader babel-preset-es2015 --save-dev

如何將靜態文件模塊化

咱們項目中用到的靜態文件主要有css文件、圖片和圖標等，這裏咱們主要以css進行講解。先在根目錄裏面新建一個style.css文件,並添加一些樣式，咱們將css文件進行模塊化前須要下載相應的的加載器，主要有style-loader和css-loader

$ npm i style-loader css-loader

在app.js文件裏面引用css文件（咱們很容易發現是在css的目錄前面加了2個前綴），在瀏覽器裏面就能夠查看到相應的css樣式改變了。

require(「!style-loader!css-loader!./style.css」)

如何配置webpack.config.js文件

從靜態文件模塊化咱們就能夠看出來，這種對每一個文件都須要操做是比較麻煩，若是能夠在一個地方配置後，全部同類文件都自動進行相同操做就比較人性化了，這時候就須要對webpack的配置文件進行操做了。

在項目根目錄新建一個webpack.config.js文件，而後添加配置。webpack的基本配置主要有三個部分：入口文件、出口文件和模塊加載器

module.exports = { //入口文件
    entry: "./app.js", //出口文件
 output:{ path: __dirname , filename: "bundle.js" }, //模塊
 module:{ //加載器
　　　　loaders:[ 　　　　　　//css加載器
　　　　　　{test:/\.css$/,loader:"style-loader!css-loader"}, //將全部的.css結尾的文件都進行相同操做
　　　　　　//js加載器
　　　　　　{ 　　　　　　　　test:/\.js$/, 　　　　　　　　loader:"babel-loader", 　　　　　　　　exclude:/node-module/, 　　　　　　　　query:{ 　　　　　　　　　　presets:["es2015"] 　　　　　　　　　　} 　　　　　　} //將全部的以.js結尾的文件進行相同操做，不包含node_module裏面的文件，查找到須要處理的是es2015文件
　　　　]　　 　　　　 　　} }

修改app.js，主要是引入css文件不須要添加前綴了：

require("./style.css");

代碼中全部的es6語法在生成的目標文件bundle.js裏面都會轉換成es5的語法，能夠在bundle.js裏面進行查看（主要將people變量聲明的let轉換爲var）。

如何使用package.json啓動項目

咱們前面全部的開發都是在瀏覽器中打開本地文件，可是實際開發中咱們有些操做必須在服務器上面啓動項目才能實現，好比對後臺數據的操做等。webpack也爲咱們準備相應的功能，這時候咱們主要使用的是webpack提供的工具webpack-dev-server：

$ npm i webpack-dev-server --saver-dev

安裝webpack-dev-server完成後，咱們還須要對package.json的scripts對象進行配置：

"start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js", "build": "webpack"

指令：start 工具：webpack-dev-server 入口：--entry ./src/js/app.js
 出口：--outpt-filename ./dist/bundel.js

進入終端，在根目錄輸入npm (run) start指令webpack就會幫我啓動一個web服務，默認8080端口，在瀏覽器輸入localhost:8080就能夠看到效果了：

$ npm start

（end）

下一節我會寫上使用webpack構建一個vue2的基本開發環境。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。