一、Webpack相關概念
什麼是Webpack？
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
WebPack和Grunt以及Gulp相比有什麼特性？
其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：
在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之後可以自動替你完成這些任務。
Webpack的工作方式是：
把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。
什麼是模塊化？
一個js文件就是一個獨立的隔絕的作用域。可以把js文件當成一個對象。在模塊化中，如果a文件需要訪問b文件的內容，需要向外暴露出去。
模塊化的方式：
1).require.js----->> 遵循amd規範
2).es6model
輸出
export
引入
import
3).node.js提供的 ----->> common.js規範
//向外暴露
module.exports= <需要暴露的內容>;
//引入其他文件暴露的內容
//路徑的寫法：
1.如果從當前路徑找文件需要寫'./'
2.如果從node_modules中找模塊，就直接寫模塊名字
2.如果從node_modules中找模塊，就直接寫模塊名字，如果找不到，就會從node內置中找，還找不到就拋出異常。
webpack支持的以上模塊化的模塊化方式
藉助loader，插件，預設去處理文件。
二、安裝webpack
1、安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
PS：淘寶鏡像：因爲 npm 安裝插件是從國外服務器下載， 受網絡影響大，可能出現異常， 如果npm的服務器在中國就好了， 所以我們樂於分享的淘寶團隊幹了這事。 這是一個完整 npmjs.org 鏡像， 你可以用此代替官方版本(只讀)， 同步頻率目前爲10 分鐘 一次以保證儘量與官方服務同步。
2、全局安裝webpack
cnpm install -g webpack
3、查看版本
webpack –v
4、本地安裝(在項目路徑下安裝)
cnpm init //創建package.json文件
cnpm install webpack--save-dev
簡寫：cnpmi webpack –D
//卸載：cnpm uninstallwebpack --save-dev
5、完成後在package.json文件中出現：
//項目的開發依賴，指項目在開發過程中需要用到插件，但是在發佈項目後不再需要使用。
"devDependencies":{
"webpack": "^3.1.0"
}
//項目的生產依賴，指項目在開發過程中需要用到插件，但是在發佈項目後還需要使用。
例：cnpm install jquery --save
cnpm install jquery-S
完成後在package.json文件中出現:
"dependencies":{
"jquery": "^3.2.1"
}
6、如果只有webpack那麼只能編譯JavaScript文件。如果需要編譯其他文件，css，html，es6，vue，jsx，ts…… 則需要loader加載器
例如：
Css:
編譯css文件需要兩個loader：css-loader style-loader
安裝命令：cnpm install css-loader style-loader –D
安裝後可在package.json文件中查看依賴
ES6：
plugin 插件 es6箭頭函數 es6promise es6modle es6class
preset 預設 es6所有插件打包好做成預設
編譯es6語法的loader:babel-loader
第一次安裝還需要全局安裝babel命令
npm install -g babel-cli
本地安裝
npm install babel-loaderbabel-core -D
//babel-loader:babel加載器
//babel-core:babel核心語法
安裝es6的預設
npm installbabel-preset-es2015 -D
babel編譯規則需要.babelrc文件配置
.babelrc文件下：
{presets:['es2015']}
三、操作webpack
方式一：.node.js提供的 ----->> common.js規範
1、使用webpack 編輯源文件和目標文件
源文件,即向外暴露的文件，例如：
在person.js下：
//向外暴露，定義需要暴露的對象
module.exports= {
age:40,
name:"zhangsan"
}目標文件，即入口文件，例如：
在entry.js下:
//引入其他文件暴露內容
var p = require("./person.js");
//引入css需要編譯的文件
require("../css/style.css");
//模板字符串格式
var str = `
名字是:${p.name},
年齡是:${p.age}
`;
//測試是否引入成功
document.querySelector('#box').innerText = str;
2、編輯webpack配置文件:webpack.config.js:
module.exports = {
//入口文件
entry:'./js/b.js',
//輸出文件
output:{
//__dirname是nodejs的全局變量,指的是當前路徑
path:__dirname,
filename: 'dest/app.js'
}
//編譯時需要使用的模塊
module:{
//編譯文件是需要時用的所有loader的配置
loaders:[
//文件被loader處理的規則
{
test:/\.css/,
//有順序之分的，從後往前讀，使用!連接
//css-loader辨別css文件，style-loader添加樣式內容
loader:"style-loader!css-loader"
}
]
}
}3、執行webpack,打包生成app.js，引入到index.html文件中，即一個瀏覽器可識別的JavaScript文件，所有文件依賴於該js文件，完事。
方式二<<.es6model>>
方法類似，不同之處有：
1) 在暴露方式和入口不同
2) 同時還需要引入編譯ES6時使用的模塊
3) babel編譯規則需要.babelrc文件配置
.babelrc文件下：
{presets:['es2015']}
1、使用webpack 編輯源文件和目標文件
源文件,即向外暴露的文件，例如：
在person.js下：
//向外暴露，定義需要暴露的對象，須嚴格按照ES6語法編寫，因爲編譯時嚴格//按ES6語法編譯，否則會報錯。
var name = "zhangsan";
var name1 = "lisi";
export{
name,
name1
}目標文件，即入口文件，例如：
在entry.js下:
//引入css需要編譯的文件
require("../css/style.css");
//引入其他文件暴露內容
import {name,name1}from "./person.js";
console.log(name,name1);
2、編輯webpack配置文件:webpack.config.js:
module.exports = {
//入口文件
entry:'./js/b.js',
//輸出文件
output:{
//__dirname是nodejs的全局變量,指的是當前路徑
path:__dirname,
filename: 'dest/app.js'
}
//編譯時需要使用的模塊
module:{
//編譯文件是需要時用的所有loader的配置
loaders:[
//文件被loader處理的規則
{
test:/\.css/,
//有順序之分的，從後往前讀，使用!連接
//css-loader辨別css文件
//style-loader添加樣式內容
loader:"style-loader!css-loader"
},
{
test:/\.js/,
loader:"babel-loader",
//node_modules裏面文件已經編譯好，因此無需重複編譯
exclude:/node_modules/
}
]
}
}3、ES6中變量、對象、函數、和類的引入和輸出方式
//1、
//輸出方式
var obj = {
name1: 'zhangsan',
name2: 'lisi',
name3: 'wangwu'
}
export default obj;
//引入方式
import obj from'./person.js'
//2、
//輸出方式
var name1 ='zhangsan';
var name2 = 'lisi';
var name3 ='wangwu';
export {name1,name2, name3}
//引入方式，對象解構的形式接收
import {name1,name2, name3} from './person.js'
import {name1,name2} from './person.js'
import {name1} from'./person.js'
//3、
//輸出方式
var name1 ='zhangsan';
var name2 = 'lisi';
var name3 ='wangwu';
export {name1,name2, name3}
//修改輸出的變量名
import {name1 asn1, name2, name3} from './person.js'
//4、
//輸出函數
export defaultfunction(){
console.log(123);
}
//引入
import fun from'./person.js'
fun();
//5、
//輸出類
export defaultclass P{
constructor(name, age){
this.name = name;
this.age = age;
}
say(){
console.log(`name:${this.name},age:${this.age}`);
}
}
//引入
import Person from'./person.js'
var p1 = newPerson('zhangsan', 10);
p1.say();