<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          如何寫 Webpack 配置文件

          時間:?2017-11-23閱讀:?1739標簽:?webpack作者:?Xiao555

          本文從一個小Demo開始,通過不斷增加功能來說明webpack的基本配置,只針對新手,也歡迎指正錯誤。

          Node.js version: -v7.7.0 webpack 最好全局裝一下

          Base

          我們先從簡單的Demo開始,首先我創建了一個項目目錄webpack,在該目錄下運行命令:

          npm init
          npm install webpack html-loader style-loader css-loader --save-dev
          

          安裝完成后我的package.json是這樣子的:

          {
            "name": "webpack-example",
            "version": "1.0.0",
            "description": "A webpack example",
            "main": "index.js",
            "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1"
            },
            "keywords": [
              "webpack"
            ],
            "author": "xiao555",
            "license": "MIT",
            "devDependencies": {
              "css-loader": "^0.28.0",
              "html-loader": "^0.4.5",
              "webpack": "^2.3.3"
            }
          }
          

          然后我在根目錄下創建了index.html,style.css,entry.js,webpack.config.js:

          // index.html
          <!DOCTYPE html>
          <html>
          <head>
            <title>Hello Webpack</title>
            <link rel="stylesheet" type="text/css" href="./style.css">
          </head>
          <body>
            <h1>Hello Webpack!</h1>
            <script src="/bundle.js"></script>
          </body>
          </html>
          
          // style.css
          h1 {
            color: lightblue;
          }
          
          // entry.js
          require('./style.css')
          
          // webpack.config.js
          let webpack = require('webpack')
          
          module.exports = {
            entry: './entry.js',
            output: {
              path: __dirname,
              filename: 'bundle.js'
            },
            module: {
              rules: [
                {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader'
                }
              ]
            }
          }
          

          然后修改一下package.json的scripts:

          "scripts": { 
              "start": "webpack --config webpack.config.js",
              "test": "echo \"Error: no test specified\" && exit 1"
            },
          

          好了,這樣一個簡單的Demo就完成了,讓我們看一下效果:

          ?  webpack npm start
          
          > webpack-example@1.0.0 start /Users/zhangruiwu/Desktop/webpack
          > webpack --config webpack.config.js
          
          Hash: f9e8a168c2845147afb4
          Version: webpack 2.3.3
          Time: 384ms
              Asset     Size  Chunks             Chunk Names
          bundle.js  73.1 kB       0  [emitted]  main
             [0] ./style.css 895 bytes {0} [built]
             [1] ./entry.js 22 bytes {0} [built]
             [2] ./~/base64-js/index.js 3.48 kB {0} [built]
             [3] ./~/buffer/index.js 48.6 kB {0} [built]
             [4] ./~/css-loader!./style.css 190 bytes {0} [built]
             [5] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
             [6] ./~/ieee754/index.js 2.05 kB {0} [built]
             [7] ./~/isarray/index.js 132 bytes {0} [built]
             [8] ./~/style-loader/addStyles.js 8.51 kB {0} [built]
             [9] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
            [10] (webpack)/buildin/global.js 509 bytes {0} [built]
          

          可以看到目錄里生成了一個bundle.js,這就是webpack打包后的文件,我們在瀏覽器里打開index.html: 


          OK, 可以看到我們的css已經渲染上去了。 我們的webpack配置文件做了什么呢?

          // webpack.config.js
          let webpack = require('webpack')
          
          module.exports = {
            entry: './entry.js', // 入口文件,根據這個文件來決定打包哪些文件
            output: {
              path: __dirname,   // 打包后文件存放的路徑
              filename: 'bundle.js' // 打包后文件的名稱
            },
            module: { // 決定不同類型的模塊如何處理
              rules: [ // 決定了模塊創建規則,
                {
                  test: /\.css$/, // 匹配文件類型
                  loader: 'style-loader!css-loader' // 應用加載器,'-loader'可以省略(v2好像不可以了)
                }
              ]
            }
          }
          

          Loader

          好了,讓我們改一下,我再目錄里加了一張圖片bg.jpg,修改了style.css :

          h1 {
            color: lightblue;
          }
          
          body {
            background-image: url('./bg.jpg');
          }
          

          npm start 一下:

          ERROR in ./bg.jpg
          Module parse failed: /Users/zhangruiwu/Desktop/webpack/bg.jpg Unexpected character '?' (1:0)
          You may need an appropriate loader to handle this file type.
          (Source code omitted for this binary file)
           @ ./~/css-loader!./style.css 6:94-113
           @ ./style.css
           @ ./entry.js
          

          報錯了,這個錯誤是什么呢?因為我們引入了一個jpg圖片文件,要打包的話需要一個處理這種文件類型的loader:

          // bash
          npm i url-loader --save-dev
          // webpack.config.js
          module: {
              rules: [
                {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader'
                },
                {
                  test: /\.(jpe?g|png|gif|svg)$/,
                  loader: 'url-loader' // copy文件的loader
                }
              ]
            }
          

          重新npm start,發現根目錄下多了一個f58125a1fa5c143130104dc5fa9af77b.jpg, 瀏覽器打開index.html: 


          OK!

          我們改造一下:

          1. css用stylus
          2. css,img等資源放在/src目錄下
          3. 打包后圖片文件放在/dist/static目錄下
          4. 打包文件統一放在一個目錄下/dist
          npm i stylus stylus-loader html-webpack-plugin --save-dev
          

          調整目錄結構:

          - webpack
              - src
                  - assets
                      - img
                          - bg.jpg
                  - style
                      - main.styl
                      - entry.js
              - index.html
              - webpack.config.js
              - package.json
          
          // index.html
          <!DOCTYPE html>
          <html>
          <head>
            <title>Hello Webpack</title>
          </head>
          <body>
            <h1>Hello Webpack!</h1>
          </body>
          </html>
          
          // main.styl
          h1
            color lightblue
          body
            background-image url('~assets/image/bg.jpg')
          
          // entry.js
          import './main.styl'
          
          // webpack.config.js
          let webpack = require('webpack')
          let path = require('path')
          let HtmlWebpackPlugin = require('html-webpack-plugin');
          
          module.exports = {
            entry: {
              style: './src/style/entry.js' // 新的入口文件
            },
            output: {
              path: path.join(__dirname, './dist'), // 新的打包目錄
              filename: '[name].js' // 這里的name對應entry的key值,這里是style,如果增加一個入口文件scrit的話,同樣生成一個script.js
            },
            module: {
              rules: [
                {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader?sourceMap'
                },
                {
                  test: /\.(jpe?g|png|gif|svg)$/,
                  loader: 'url-loader?name=static/[hash].[ext]' // '?'后跟loader的配置參數,這里name指文件名,static目錄下
                },
                { 
                  test: /\.styl$/,  // 增加stylus文件的loader
                  loader: "style-loader!css-loader!stylus-loader?sourceMap" // 可以通過'!'來級聯loader
                }
              ]
            },
            resolve: {
              alias: {
                'assets': path.join(__dirname, './src/assets') // 定義別名,用法見main.styl 里 background-image url('~assets/image/bg.jpg')
              }
            },
            plugins: [
                // 這個插件用來處理html文件,https://github.com/jantimon/html-webpack-plugin , 這里的作業是吧index.html打包到dist目錄下
              new HtmlWebpackPlugin({ 
                filename: 'index.html',
                template: 'index.html'
              })
            ]
          }
          

          npm start 之后生成的目錄結構:

          - dist
              - static
                  - f58125a1fa5c143130104dc5fa9af77b.jpg
              - index.html
              - style.js
          

          瀏覽器訪問這個目錄下的index.html,沒有問題,為什么要把html搞到dist目錄下呢? 可以F12看看body背景圖片的url,是相對與打包目錄dist的,也就是說這里訪問的根目錄是打包目錄,我們的html也要放進去。

          讓我們繼續改造:

          1. 引入第三方css

          以FontAwesome為例:

          npm install font-awesome --save
          
          module: {
              rules: [
                {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader?sourceMap'
                },
                {
                  test: /\.(jpe?g|png|gif|svg)$/,
                  loader: 'url-loader?name=static/[hash].[ext]'
                },
                { 
                  test: /\.styl$/, 
                  loader: "style-loader!css-loader!stylus-loader?sourceMap"
                },
                {
                    // FontAwesome 需要加載字體文件,(\?.*) 處理帶版本號的文件
                  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                  loader: 'url-loader',
                  options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                  }
                }
              ]
            },
          

          2. 多html文件

          html-webpack-plugin 這個插件處理多html文件,就是多new幾次,也可以通過數組ForEach的方法:

          let config = {
            entry: {
              style: './src/style/entry.js'
            },
            output: {
              path: path.join(__dirname, './dist'),
              filename: '[name].js'
            },
            module: {
              rules: [
                {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader?sourceMap'
                },
                {
                  test: /\.(jpe?g|png|gif|svg)$/,
                  loader: 'url-loader?name=static/[hash].[ext]'
                },
                { 
                  test: /\.styl$/, 
                  loader: "style-loader!css-loader!stylus-loader?sourceMap"
                },
                {
                  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                  loader: 'url-loader',
                  options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                  }
                }
              ]
            },
            resolve: {
              extensions: ['.js', '.vue', '.json'],
              alias: {
                'assets': path.join(__dirname, './src/assets')
              }
            },
            plugins: []
          }
          const array = ['index', 'test']
          array.forEach((file) => {
            const conf = {
              filename: `${file}.html`,
              template: `${file}.html`
            }
            config.plugins.push(new HtmlWebpackPlugin(conf))
          })
          
          module.exports = config
          

          3. 某些文件單獨打包

          以jquery為例:

          npm i file-loader --save-dev
          npm i jquery --save
          
          - src
              - script
                  - entry.js
          
          // entry.js
          import 'copy!jquery/dist/jquery.min.js'
          
          // webpack.config.js
          entry: {
            style: './src/style/entry.js',
            script: './src/script/entry.js' // 新增入口文件
          },
          ...
          resolveLoader: { // 處理loader
            alias: {
              'copy': 'file-loader?name=[name].[ext]', //&context=./src
            }
          },
          

          npm start 后會發現/dist 目錄下jquery.min.js已經單獨打包出來了

          4. 熱加載

          以BrowserSync為例:

          npm i browser-sync browser-sync-webpack-plugin --save-dev
          
          let BrowserSyncPlugin   = require('browser-sync-webpack-plugin')
          
          let config = {
           watch: true,
           plugins: [
              new BrowserSyncPlugin(
                // BrowserSync options 
                {
                  // browse to http://localhost:3000/ during development 
                  host: 'localhost',
                  port: 4000,
                  // proxy the Webpack Dev Server endpoint 
                  // (which should be serving on http://localhost:3100/) 
                  // through BrowserSync 
                  // proxy: 'http://localhost:3100/'
                  server: { 
                    baseDir: ['dist'],
                    directory: true  // with directory listing
                  }
                },
                // plugin options 
                {
                  // prevent BrowserSync from reloading the page 
                  // and let Webpack Dev Server take care of this 
                  reload: true
                }
              )
            ]
          }
          

          會自動打開瀏覽器訪問http://localhost:4000/, 修改被打包的文件會自動刷新

          5. 配置stylus和babel

          npm i autoprefixer nib poststylus babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 --save-dev
          
          // ./src/style/variables.styl
          blue = #0073aa
          
          // ./src/style/main.styl
          h1
            color blue
          
          let poststylus = require('poststylus')
          ...
          plugins: [
              new webpack.LoaderOptionsPlugin({
                // test: /\.xxx$/, // may apply this only for some modules
                options: {
                  stylus: {
                    use: [
                      poststylus([ 'autoprefixer' ]),
                    ],
                    import: [
                      '~nib/index.styl',
                      path.join(__dirname, 'src/style/variables.styl')
                    ]
                  },
                  babel: {
                    presets: ['es2015'],
                    plugins: ['transform-runtime']
                  }
                }
              }),
              ...
            ]
          

          autoprefixer是個自動添加前綴的插件,nib是一個不錯的css庫,variables.styl可以作為stylus的全局變量加載,babel不用說,可以寫es6的代碼。

          總結

          感覺把以上說的走一遍,webpack基本的配置就可以熟悉了,會引入loader,配置loader選項,會設置alias,會用plugins差不多。

          至于現在一些比較大的項目中分多個配置文件,是根據不同的場景拆分開的,基本的一個webpack.base.config.js,主要包含loader,resolve等全局通用的部分,剩下的根據開發或者生產環境分成webpack.dev.config.js,webpack.prod.config.js,除了都會合并base的內容,其他可能跟去環境不一樣像output, plugins也都有所不同。

          另外,我說的不是很詳細,有些東西還要自己去踩坑,比如loader和plugins的配置可以看官方文檔,我沒有詳細說。


          原文轉載:https://www.xiao555.com.cn/posts/webpack-config


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/154

          Webpack中如何編寫一個自定義的loader

          Webpack中loader是一個CommonJs風格的函數,接收輸入的源碼,通過同步或異步的方式替換源碼后進行輸出。需要注意的是,該導出函數必須使用function,不能使用箭頭函數,因為loader編寫過程中會經常使用到this訪問選項和其他方法。

          webpack 中 import css 文件報錯: Module build failed...

          項目中引入了css文件,配置了 rules 中:在執行 webpack 命令時,發生錯誤,報錯信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,經查詢,是loader順序不正確導致此問題,修改后如下:

          webpack 階段回顧 之 webpack-dev-server

          webpack-dev-server是一個讓我們可以模擬線上環境進行項目調試的工具,主要功能有:路徑重定向、瀏覽器中顯示編譯錯誤、接口代理 如解決跨域、熱更新

          《深入淺出webpack》有感

          nodejs的出現對于構建工具具有重要的意義,在沒有nodejs之前,js只能執行在瀏覽器環境下,所以意味著對發布前的js文件要進行處理,十分局限,沒有打包工具,只能用PHP腳本來處理文件

          webpack是什么?

          webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle

          webpack的optimization.namedModules

          optimization.namedModules 這個配置對于調試起來很方便,比如原本生產的一段代碼是長這樣的:很多奇怪的數字,比如最后幾行的 [0,0] 是表示了什么意思?如果配置上namedModules 為true呢

          為什么要用webpack?

          現今的很多網頁其實可以看做是功能豐富的應用,它們擁有著復雜的JavaScript代碼和一大堆依賴包。模塊化,讓我們可以把復雜的程序細化為小的文件;

          webpack 從入門到放棄

          隨著前端項目復雜程度越來越高,依賴也越來越多,為了提高項目中代碼的可復用性,前端開始提出模塊化開發的思路,前端模塊化會有以下幾個痛點:命名沖突,文件依賴,代碼復用

          Webpack知識點

          Webpack從基礎概念到項目配置,涉及知識點較多,現將學習使用過程中遇到內容記錄下來,方便以后速查。Webpack是一個模塊打包工具,在Webpack里一切文件皆模塊。通過loader轉換文件,通過plugin注入鉤子

          webpack3 升級 webpack4踩坑記錄

          安裝webpack4最新版本;這個在webpack3中,webpack本身和它的CLI是在同一個包中,webpack4中將兩個分開管理。記得添加mode用來告知 webpack 使用相應環境的內置優化

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网