webpack學習筆記（一）

時間 2019-11-19

標籤 webpack 學習筆記简体版

原文原文鏈接

參考文章： https://www.jianshu.com/p/91a4214b913bcss

https://segmentfault.com/a/1190000014251654?utm_source=tag-newesthtml

https://www.jianshu.com/p/cb0db034cb17vue

https://blog.csdn.net/w178191520/article/details/85932849node

https://blog.csdn.net/qq_39343308/article/details/86159668react

完全解決 webpack 打包文件體積過大webpack

webpack4提高180%編譯速度web

1.卸載全局的 webpackajax

npm uninstall webpack webpack-cli -g

　其中安裝webpack-cli 是可讓webpack在命令行執行的。在webpack 4.0 中須要安裝。chrome

2 局部安裝webpackexpress

npm install webpack webpack-cli -D

3. 具體安裝某個版本：

npm install webpack@4.16.5 webpack-cli -D

附，webpack安裝版本：

{
  "name": "lesson",
  "sideEffects": false,
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.3.1",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.1",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.2.0",
    "@babel/runtime-corejs2": "^7.2.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "webpack": "^4.25.1" 
  }
}

=================================

首先新建最基本的構造：

執行 npm init 生成的配置文件

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack"
  },
  "author": "zhenyulei",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.3.1",
  }
}

webpack.config.js文件：

const webpack = require ('webpack');
const path = require ('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main:'./src/index.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

=========================================

4. 樣式css配置

先安裝 'style-loader','css-loader','sass-loader,'node-sass'

module:{
    rules:[{
       test:/\.css$/ ,
       use:['style-loader','css-loader','sass-loader'] 
    }]
}

sass-lode處理scss文件， css-loader 處理css文件之間 import的引用；style-loader 會把css-loader轉換成的css掛在到html生成的header部分；使用sass-loader 還要安裝 node-loader

5. 自動添加css前綴 npm i postcss-loader autoprefixer -D 注意的是這只是針對直接引用的css樣式，而不能給 css中在 @import進來的css，緣由見6；

module:{
    rules:[{
       test:/\.scss$/ ,
       use:[   'style-loader',
               'css-loader',
               'postcss-loader',
               'sass-loader'      
    ] 
    }]
}

而後在postcss.config.js 中定義autoprefixer插件

module.exports = {
    plugins:[
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
}

若是打包編譯報警告：

則將postcss文件中 browsers 改成："overrideBrowserslist"

6 若是scss中引入其餘的scss，如 @import './index.scss'

這種狀況下，若是不作設置，index.scss就會從css-loader開始執行，因此要在下面設置 css-loader的參數：每次要執行幾個路徑：

module:{
    rules:[{
       test:/\.css$/ ,
       use:[  
               'style-loader',
                {
                loader:'css-loader', //css-loader若是要增長下面的配置項，則寫成對象形式。
                options:{
                    importLoaders:2,  //表示在css中 使用import引入的css文件，也要執行下面兩個loader
                    modules:true    //css模塊化打包，也就是哪一個頁面引入了該css，則對哪一個頁面有效，避免影響其餘的文件（後續發現，設置了該值樣式不在生效）

                 }
               },  
               'postcss-loader',  //這裏注意postcss和sass的loader順序
               'sass-loader'  //先用sass編譯成css，再用postcss
      ] 
    }]
}

7 加載圖片loader

module:{
   rules:[{     //有多個規則，因此須要使用數組
      test:/\.(jpg|png|gif)$/,  //匹配後綴文件
 use:{ loader:'file-loader', //使用file-loader編譯文件  options:{ name:'[name]_[hash].[ext]', //輸出名字其中[ext]是後綴名稱 outputPath:'images/', //圖片的輸出路徑,指的是輸出文件夾的 好比dist文件夾
  } } }] }

8. 使用url-loader 能夠把小圖片轉成base64，而後放在打包的js文件中。他的功能比file-loader 功能更全！ file-loader則是打包成單獨的文件

module:{
   rules:[{     //有多個規則，因此須要使用數組
      test:/\.(jpg|png|gif)$/,  //匹配後綴文件
 use:{ loader:'url-loader', //使用url-loader編譯文件  options:{ name:'[name]_[hash].[ext]', //輸出名字其中[ext]是後綴名稱 outputPath:'images/', //圖片的輸出路徑 limt:2048, //大小限制，比2048小的圖片轉成base64，大的圖放在outputPath路徑下  } } }] }

9 根據阿里巴巴字體庫( https://www.iconfont.cn/ )下載icon字體(先添加購物車，再下載代碼)，保存後綴爲.eot，.svg，.ttf ， .woff的文件，放在項目的font文件夾下；

複製下載的 iconfont.css文件中全部代碼,並修改src'的路徑

@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1554433240017'); /* IE9 */
  src: url('./iconfont.eot?t=1554433240017#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('./iconfont.woff?t=1554433240017') format('woff'),
  url('./iconfont.ttf?t=1554433240017') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1554433240017#iconfont') format('svg'); /* iOS 4.1- */
}

放入本身的font.css文件中

使用方法，在html中增長必須的類名：

import './font.css' //引入字體文件的css
<div class="iconfont .icon-zhaoxiangji">abc</div>

因爲webpack沒法識別引入的字體文件後綴，因此要在配置文件中使用file-loader進行對字體的編譯，目的是把這些文件從font文件夾下放在dist文件夾下：

{
    test:/\.(eot|ttf|svg)$/,
    use:{
      loader:'file-loader'
    }
}

而且去掉css的模塊化

10 使用插件：使用 npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'  
        //使用該插件，能夠在打包結束後，根據配置的模板，
        //生成html文件，而且把配置的output中的js文件引入html
    })
],

clean-webpack-plugin 清除dist文件夾的內容，詳見：

webpack 4.0 中 clean-webpack-plugin 的使用

const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除dist文件夾的內容
plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html' // 在打包以後運行
    }), 
    new CleanWebpackPlugin(),// 在打包以前運行
],

PS: 須要修改文件，執行 npm run build以後纔會生成新的打包js文件

2: 若是打包報這個錯誤 CleanWebpackPlugin is not a constructor---記得改爲：

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js', //多個入口文件
        sub: './src/sub.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist') //自動生成多個出口js文件
    }
}

若是想讓生成的html文件，引入的js文件前面自動加前綴路徑：

output: {
    publicPath:'http://cdn.com.cn'    //文件路徑前綴
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist') //自動生成多個出口js文件
}

12 sourceMap

如今已經知道 dist目錄下的 main.js 文件96行出錯了，
sourceMap 它是一個映射關係，知道dist目錄下 main.js 文件 96 行
實際上對應的是 src 目錄下 index.js 文件中的第一行

devtool:'source-map' 這樣設置，會在生成的文件中生成對應的map文件，記錄對應關係

devtool:'inline-source-map' 會被打包到生成的js文件中。

devtool:'cheap-inline-source-map' //cheap 只映射到哪一行而不須要定位到那一列,而且只會映射編寫的index.js 和生成的bundle.js文件。不會管loader等其餘的映射

devtool:'cheap-module-source-map' //module 還要管一些loader下的文件

實際用的過程當中建議用：

devtool:'cheap-module-eval-source-map'  //本地開發 eval打包快 可是提示不全面
devtool:'cheap-module-source-map'  //線上提示

13 webapck-dev-server 要安裝，他能夠自動刷新頁面，更新修改的代碼。

配置文件中： "start":"webapck-dev-server"

devServer: {
    contentBase: './dist', //服務器使用的地址
    open: true, // 設置爲true時 自動打開瀏覽器，且因爲服務器的做用，打開瀏覽器的地址是 http協議，不然單獨打開html文件的協議是file://,這樣沒法使用ajax請求
    port: 8080, //開啓的服務器端口
　　 proxy:{    //在這裏作的配置代理，訪問本地的/api 接口 都會跑到 代理的網址上去
　　    '/api' : 'http://localhost:8000'
　　 }

},

14 開啓HMR熱更新模式：即若是你更新了代碼，頁面不會刷新，只是修改你更改的部分，這樣會保持頁面原來的操做態；

1 ）首先，設置devserver的 open

devServer: {
    contentBase: './dist',
    open: true, 
    port: 8080,
    hot: true  //這裏

},

2）而後使用webpack自帶的熱更新插件，要先引入webpack

const webpack = require('webpack');
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

15 上面修改css生效了可是對於js 文件修改後頁面沒有更新，看下面代碼：

也就是每次更新都要刪掉以前對應的代碼在更新，

之因此css和vue,react等沒有這樣去作是由於使用的 scss-loader vue-loader react-loader 等loader已經幫咱們內置了這個功能。

相關標籤/搜索

每日一句

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