Webpack打包工具學習使用
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、
Coffeescript、 LESS 等。
一、核心概念
入口：webpack打包的入口文件
輸出：這個就是對源代碼打包之後，得到的文件，文件我們一般命名為bundle.js
Loader：默認情況下，webpack只能打包.js結尾的文件，但是webpack提供了很多Loader，能打包項目中任何文件，比如css，vue，png文件都可以打包
配置文件：簡化我們的配置，讓我們少寫代碼
插件：比如壓縮js、比如開發階段實現的熱重載(在代碼中保存，瀏覽器就自動刷新)，為了讓webpack更加強大
二、實際演練
前提：安裝好`webpack`全局包，輸入指令：npm i webpack -g
1、打包單個.js文件
步驟：
1、在cmd切換到項目根目錄
2、使用webpack全局包打包即可
格式：webpack 入口文件(entry.js) 輸出文件(bundle.js)
輸入指令： webpack entry.js bundle.js
3、打包得到bundle.js，建立index.html，在index.html中導入打包之後的bundle.js
4、運行
註意點：在index.html中導入的一定是打包之後的輸出文件
2、打包多個具有依賴關系的.js文件
前提：
在entry.js中的代碼中導入依賴的文件
1、在modul的內容 var name=“張三” 並且進行輸出module.exports=name;
2、在入口文件進行導入modul的內容 const name = require(‘./module.js‘);
3、然後進行打包得到bundle.js
步驟： 同上
註意點：
在index.html中導入的一定是打包之後的輸出文件 bundle.js，Webpack 會分析入口文件，解析包含依賴關系的各個文件。 這些文件（模塊）都打包到 bundle.js 。
3、打包非.js文件 （通過Loaders實現）
以打包.css文件為例（需要額外做的步驟）
1、安裝style-loader&css-loader：
先輸入 npm init -y 生成一個 package.json 用來裝包的 輸入指令：cnpm i style-loader css-loader --save-dev
2、在入口文件中導入css的時候，按照下面這樣寫 在js中寫：require(‘!style-loader!css-loader!./site.css‘)
3、針對第二步，如果導入的css過多，還可以做一個簡化，在入口文件，導入的時候，可以不用寫前面的 在js中寫：require(‘./site.css‘)
但是，在使用webpack打包的時候，得這樣寫 輸入指令：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
註意點： "css=style-loader!css-loader" 使用雙引號即可，不然會報錯
4、配置文件(一起打包,重點學習)
作用：簡化打包的操作
步驟：
1、在項目根目錄下創建一個文件名稱叫 webpack.config.js的文件（默認文件名稱）
2、把我們原先在cmd中寫的命令，全部寫到webpack.config.js中(在這個文件中進行手動配置)
3、最後在根目錄下，執行webpack即可打包了
a、在入口文件entry.js中導入想要的文件require(‘./site.css‘)
b、不是js後綴的文件話在先裝對應的loader文件，裝之前要生成一個package.json用來裝包
c、在webpack.config.js輸寫下面的代碼
module.exports = {
entry:‘./entry.js‘, //項目打包的入口文件
output:{
path: __dirname,
filename: ‘bundle.js‘ //輸出文件
},
module:{ //配置loader
loaders: [
{
test: /\.css$/,
loader: ‘style-loader!css-loader‘ //loader執行順序是從後往前
}
]
}
}
e、輸入指令:webpack 即可打包 相當於webpack webpack.config.js
5、插件
作用：讓我們Webpack的功能更加強大
全局包&本地包：
（1）安裝方式不一樣
全局包 npm i webpack -g 用在終端裏面，執行命令
本地包 npm i webpack --save-dev 用在項目裏面的
（2）安裝的地方不一樣
全局包：是安裝在個人目錄下 C:\Users\你自己的用戶名\AppData\Roaming\npm
本地包：項目的根目錄的node_modules中
1、步驟同上，用之前要在項目中安裝本地webpack ，輸入指令npm i webpack --save-dev
2、代碼如下：
var webpack = require(‘webpack‘)
module.exports = {
entry:‘./entry.js‘, //項目打包的入口文件
output:{//輸出文件
path: __dirname,
filename: ‘bundle.js‘
},
module:{ //配置loader
loaders: [
{
test: /\.css$/,
loader: ‘style-loader!css-loader‘ //loader執行順序是從後往前
}
]
},
plugins:[//插件
new webpack.BannerPlugin(‘...這個文件是被我打包的...‘)
]
}
註意點：
有些包既要全局安裝，又要在項目中安裝，不要覺得奇怪，應用的地方不一樣 plugins在我們的webpack.config.js中寫的時候，必須和entry、output、module同級。
Webpack打包工具學習使用