webpack使用

http://www.css88.com/doc/webpack/     webpack的中文文檔

https://www.cnblogs.com/brandonhulala/p/6057378.htmlcss

一.安裝node

二.安裝webpack命令環境

      npm install webpack -g         安裝後驗證:webpack-versionhtml

三.package.json工程文件(npm init)

     進入一個新建的空項目,執行npm init---一路回車vue

四.安裝本地webpack     

     npm install webpack -D node

五.小例子(這裏後續會講用webpack.config.js去配置)

     webpack默認支持commonjs寫法webpack

      index:頁面。頁面只引入bundle.js(編譯後的文件)web

      entry.js  入口文件,編寫咱須要的代碼npm

      終端:webpack entry.js bundle.js  (將入口文件編譯到bundle.js);//這裏注意每次修改js文件後都要           編譯一次.json

      導入其餘js文件:在其餘文件modele.exports=...... 而後在入口文件var name=requier(url)導入瀏覽器

      導入後再執行webpack entry.js bundle.js服務器

六loader轉換器.(後續會講webpack.config會配置)

      js文件中加載css文件,要下載依賴以下:style-loader和css-loader的依賴

         npm  install css-loader --save     //這裏注意--    --save是將下載的依賴名和版本號保存到                       package.json的文件中

         npm install  style-loader --save

        下載後在js中:require(style-loader!css-loader!./style.css);//這裏注意要加入轉換器(後續會講webpack.config配置就不須要)

      注意:在webpack中,多個loader加在要用 !  鏈接多個loader.

七.webpack.config.js配置(必需要用)

     做用:配置一些webpack須要的入口,出口,rules.....    

module.exports={
    entry:["./entry.js"],//入口文件
    output:{
        filename:"bundle.js"  //出口文件
    },
    devtool:"source-map",////直接生成source-map
    module:{
        //轉換器
        rules:[
            //設置全部以.css結尾的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
             },
            //設置全部.js結尾的Es6轉換Es5(還沒有結束,還要預設,看下文)
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/   //排除哪些目錄的js.node——modeles
            }
        ]
    }

};

   //配置後每次修改就不須要webpack entry.js bundle.js.直接執行webpack就能夠了

  // 配置Es6轉換Es5除了上文的在webpack.config.js中配置babel-loader外,還須要在目錄新建一個文件夾,       名稱爲.babelrc.內容爲{'presets':['2015']}

{
  'presets': ['es2015']
}

   //配置了loader之後引入css文件就不須要require(style-loader!css-loader!./style.css).直接                             require("./style.css")

八.webpack命令

    webpack   開發環境下編譯(打包)

    webpack -p 生產環境下編譯(壓縮)

    webpack -w 監聽文件改動,自動編譯(速度更快).就不用每次執行webpack去編譯了

    webpack -d 開啓(生成)source maps.用來調試.沒有開啓的狀態下在瀏覽器的開發者工具只有index和                            bundle壓縮後的js.開啓後能夠看到bundle所加載的全部資源的文件(方便調試)

     注:若是-p -w -d都要開啓.直接執行webpack -wdp

九.babel的使用

    首先下載如下:

                npm install babel-loader  --save

                npm install babel-core  --save

                npm install babel-preset-es2015  --save

十.webpack-dev-server用服務器打開

    首先命令安裝環境:npm install webpack-dev-server -g     //-g是全局安裝

    使用:webpack-dev-server  默認端口號:8080

    修改端口:webpack-dev-server --port 8088  //相似這樣修改端口號

    自動刷新瀏覽器:webpack-dev-server --inline  //改變代碼後,自動刷新瀏覽器

    熱重載(局部更改): webpack-dev-server --hot

    若是要執行多個:webpack-dev-server --inline --hot

  .......................固然也能夠在webpack.config.js中設置(推薦)........................

  webpack.config.js中配置後直接運行:webpack-dev-server

module.exports={
    entry:["./entry.js"],//入口文件
    output:{
        filename:"bundle.js"  //出口文件
    },
    devtool:"source-map",////直接生成source-map
    //配置server
    devServer: {
        port:8080,
        inline:true,
    },
    module:{
        //轉換器
        rules:[
            //設置全部以.css結尾的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            //設置全部.js結尾的轉換Es6(還沒有結束,還要預設)
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/   //排除哪些目錄的js.node——modeles
            }
        ],
    }

};

       ................. 還有一種打開方式:npm run dev   //那麼若是配置呢?以下:................................

 打開package.json文件,有一個scripts的選項,就是你運行的腳本.

  在scripts中增長dev:"webpack-dev-server";//注意這裏的對象左邊是你運行時候的名字,好比npm         run dev中的dev對應scripts中你的dev。右邊表示你執行npm run 一個name的時候實際上執行的命令

 好比:我容許npm run test的結果就是在控制檯輸出了一個"我是測試"

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  //scripts這裏是你運行的腳本
  "scripts": {
    "dev": "webpack-dev-server",
    "test":"echo 我是測試"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "style-loader": "^0.18.2"
  }
}

十一.引入文件時省略文件名後綴和簡化路勁(相似變量代替共同的路徑頭:目錄別名)

        配置resolve,以下.

function resolve (dir) {
  return path.join(__dirname, '..', dir);
  //這裏path.join是node整合路勁方法,在該方法中,可使用一個或多個字符串值參數,該參數返回將這些字符串值參數結合而成的路徑。__dirname是根目錄的意思。該方法前兩個參數寫死,最後一個是路徑,路徑從根目錄開始寫。eg:"src/assets"。
//因爲該方法屬於path模塊,使用前須要引入path模塊(var path= require(「path」) )
}


var path= require(「path」) 
....
module.exports={
    entry:["./entry.js"],//入口文件
    output:{
        filename:"bundle.js"  //出口文件
    },
    devtool:"source-map",////直接生成source-map
    devServer: {
        port:8080,
        inline:true,
    },
    module:{
        //轉換器
        rules:[
            //設置全部以.css結尾的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            //設置全部.js結尾的轉換Es6(還沒有結束,還要預設)
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/   //排除哪些目錄的js.node——modeles
            }
        ],
    },
    //配置省略文件後綴和簡化路徑
    resolve:{
      extensions:[" ",".js",".css",".json",".jsx」,".vue"], //省略文件後綴
      alias: {
         '@':resolve("src/assets")   //resolve方法定義在上方,之後引入文件只要引入寫法:」@/...其他的路徑」。
      }
    }
};

按需加載

動態導入時chunkFilename默認狀況是數字,0,1....;當咱們動態引入import("lodash")的時候;若是想要知道打包之後的文件是lodash而不是0.js,只須要在導入的時候加註釋:這樣打包的時候就會就會將註釋中的webpackChunkName的值替換[name],具體詳情參考文檔:https://webpack.js.org/guides/code-splitting/#dynamic-imports

import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal')
import ( /* webpackChunkName: "yourFileName" */ filePath);
import ( /* webpackChunkName: "lodash" */ 'lodash').then(({
        default: _
    }) => {
        console.log(_)
    }).catch(error => 'An error occurred while loading the component');
相關文章
相關標籤/搜索