webpack打包 基礎

00一、什麼是webpack? 做用有哪些？

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用


Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。



做用：

　一、模塊化，讓咱們能夠把複雜的程序細化爲小的文件;

 

  二、相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器可      以識別；

 

 三、Scss，less等CSS預處理器

 

00二、webpack與gulp、Grunt的區別

ebpack和另外兩個並無太多的可比性，Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。

 

00三、webpack的打包流程

webpack是創建在module之上進行打包的

 

css js img 都叫作module模塊

 

 

 00四、webpack官方配置文件

 

00五、webpack的基本使用

一、全局安裝webpack   npm install webpack -g

二、查看版本號 : webpack -v 

三、查看全局安裝過哪些模塊：npm list -g --depth 0

四、局部安裝webpack : npm install webpack --save-dev

五、基礎的打包方式 webpack 文件名 生成文件名

舒適提示：webpack4.0以上版本坑比較多，新手建議安裝4.0如下版本

　　　 一、卸載默認： npm uninstall webpack

 

      二、全局安裝： npm install webpack@3.5.3 -g

      三、局部安裝： npm install webpack@3.5.3 --save-dev

 

00六、預熱一:打包文件

一、npm init -y 生成一個node包

二、局部安裝webpack  前提全局已經安裝完畢

三、創建webpack.config.js

四、配置webpack.config文件

 

output:{

//佔位符 知足線上地址的需求
publicPath:'html://cdn.com/'

}

 

00七、html-webpack-plugin

一、安裝：npm install html-webpack-plugin

二、引入模塊： const htmlWebpackPlugin = require("html-webpack-plugin");

三、在module.exports中的plugins中配置文件
　　plugins:[
　　　　new htmlWebpackPlugin()
　　]

四、new htmlWebpackPlugin中有不少屬性 詳情請參考官方文檔
　　new htmlwebpackPlugin({
　　　　title:"若是可以安定，有誰又願意顛沛流離",
　　　　//模板文件
　　　　template:'index.html',
　　　　//生成的文件名稱
　　　　filename:"html-[hash].html",
　　　　data:new Date(),
　　　　minify:{
　　　　　　//刪除註釋
　　　　　　removeComments:true,
　　　　　　//刪除空格
　　　　　　collapseWhitespace:true
　　　　}

　　})




擴展：如需在模板中調用htmlWebpackPlugin中的參數 可用如下方法 <%= htmlWebpackPlugin.options.屬性名 %>

 

00八、html-webpack-plugin 高級應用

如須要生成多個html,而且引入不一樣的js模塊。咱們能夠屢次調用 new htmlWebpackPlugin()

 

 00九、babel

babel是一個編譯javascript的平臺，它能夠編譯代碼幫你達到如下目的
　　一、讓你使用最近的javascript代碼(ES6 ES7) 而不用管新的標準瀏覽器是否支持

　　二、讓你使用基於javascript進行擴展語言 例如react的jsx

  babel的安裝與配置

  babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中 webpack能夠把不一樣的包整合在一塊兒使用，對於每個你須要的功能或擴展，你都須要安裝單獨的包

　　一、首先安裝這些包 npm一次性安裝多個依賴模塊，模塊之間用空格隔開

　　npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

 　

　　二、處理css的loader

   npm install --save-dev style-loader css-loader  sass-loader node-sass

　二、babel的基本配置  詳情請參考官網
　　module:{
　　　　rules:[
　　　　　　{
　　　　　　　　test:/\.js$/,
　　　　　　　　use:{
　　　　　　　　　　loader:'babel-loader',
　　　　　　　　　　options:{
　　　　　　　　　　　　presets:["@babel/env","@babel/react"]
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　exclude:__dirname+'node_modules'
　　　　　　}
　　　　]
　　}

 

include和exclude須要相對路徑，因此include:__dirname +'./src/' 加前綴__dirname

0十、webpack配置跨域

devServer:{
        proxy:{
            '/api': {
                target: 'http://www.baidu.com', //目標服務器地址
                pathRewrite: { '^/api': '' },// 將/api開頭的請求地址, /api 改成 /, 即 /api/xx 改成 /xx
                changeOrigin: true// 是否修改來源, 爲true時會讓目標服務器覺得是webpack-dev-server發出的請求!
            },
            '/getData':{
                target:'http://jd.com',
                pathRewrite:{'^/getData':''},
                changeOrigin:true,
            }

        }  
    }

 

0十一、module.exports 、exports的區別

module.exports和exports的區別就是var a={}; var b=a; 中a和b的區別。exports指向的只是一個引用

require返回的只是module.exports


nodejs不支持import 和 export

module.exports：是node中內置的一個導出模塊的方法

 

 

0十二、webpack-dev-server

一、執行命令  webpack --watch 文件監聽

 

二、也能夠在package中的scripts中修改命令 build:"webpack --watch";

 

三、當執行命令 當文件發生變化的時候服務器會自動幫咱們重啓命令

 

 

除此以外還有更好用的webpack-dev-server

 

一、全局安裝 npm install webpack-dev-server@2 -g

 

二、在package.json裏面修改scripts build1:"webpack-dev-server";

 

三、運行 npm run build1

 

四、若是在4.0.1中安裝失敗 須要安裝 npm install webpack-cli -D

 

擴展：

     webpack-dev-server：不會生成線上目錄 例如咱們上面說過的build 而是放在內存中

     webpack：打包上線