webpack.config.js配置文件

時間 2019-11-14

標籤 webpack.config.js webpack config 配置文件欄目 JavaScript 简体版

原文原文鏈接

一、基本配置

webpack在執行時，除在命令行傳入參數，還能夠經過指定的配置文件來執行。默認會搜索當前目錄下webpack.config.js。這個文件是一個node.js模塊，返回一個json格式的配置對象，或者經過--config選項來指定配置文件。

   //建立webpack.config.js 
 
   var webpack = require('webpack'); 
 
   module.exports = { 
 
        entry:'./entry.js', //入口文件 
 
        output:{ 
 
             //node.js中__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑  
 
             path:__dirname, //輸出位置 
 
             filename:'build.js' //輸入文件 
 
        }, 
 
        module:{ 
 
             loaders:[ 
 
                  { 
 
                      test:/\.css$/,//支持正則 
 
                      loader:'style-loader!css-loader'  
 
                  } 
 
             ] 
 
        }, 
 
   //其餘解決方案配置 
 
   resolve: { 
 
       extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的後綴所對應的文件能夠省略後綴 
 
   }, 
 
        //插件 
 
        plugins:[ 
 
             new webpack.BannerPlugin('This file is created by ly') 
 
        ] 
 
   }

   //entry.js中引入css模塊： 
 
   require('./style.css');

   ::運行 
 
   webpack

二、plugins 插件

能夠經過npm安裝第三方插件，如：BannerPlugin的做用是給輸出的文件頭部添加註釋信息。

三、開發環境

   ::編譯輸出內容帶進度和顏色 
 
   webpack --progress --colors

::啓動監聽模式（沒有變化的模塊會在編譯後緩存大內存中，不會每次都被從新編譯）

webpack --watch

webpack -w

::使用開發服務（它將在localhost:8080啓動一個express靜態資源web服務器。並啓動監聽模式自動webpack，在瀏覽器打開http://localhost:8080/，就能夠瀏覽項目頁面，並經過一個socket.io服務實時監聽變化並自動刷新頁面）

npm install webpack-dev-server -g

四、啓動webpack-dev-server

注意：在啓動了webpack-dev-server後，編譯後的文件並無輸出到webpack.config.js中配置的output輸出目標文件夾中，而是將實時編譯後的文件保存在內存中。

例子：

   //目錄結構 
 
   myapp 
 
       |__dist 
 
       |   |__styles 
 
       |   |__js 
 
       |       |__bundle.js 
 
       |   |__index.html 
 
       |__src 
 
       |   |__component 
 
       |   |__index.js 
 
       |__node_modules 
 
       |__package.json 
 
       |__webpack.config.js

   //webpack.config.js 
 
   var webpack = require('webpack'); 
 
   var path = require('path'); 
 
   module.exports = { 
 
       entry:'./src/index.js', 
 
       output:{ 
 
           path:path.resolve(__dirname, './dist/'), 
 
           filename:'build.js' 
 
       }, 
 
       //設置開發者工具的端口號,不設置則默認爲8080端口 
 
       devServer: { 
 
           inline: true, 
 
           port: 8181 
 
       }, 
 
       module:{ 
 
           loaders:[ 
 
               { 
 
                   test:/\.js?$/, 
 
                   exclude:/node_modules/, 
 
                   loader:'babel-loader', 
 
                   query:{ 
 
                       presets:['es2015','react'] 
 
                   } 
 
               }, 
 
               { 
 
                   test:/\.css$/, 
 
                   loader:'style-loader!css-loader' 
 
               } 
 
           ] 
 
       } 
 
   };

   //package.json 
 
   { 
 
     "name": "myapp", 
 
     "version": "1.0.0", 
 
     "description": "", 
 
     "main": "build.js", 
 
     "scripts": { 
 
       "test": "echo \"Error: no test specified\" && exit 1", 
 
       "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist", 
 
       "build": "webpack --progress --colors" 
 
     }, 
 
     "author": "", 
 
     "license": "ISC", 
 
     "devDependencies": { 
 
       "babel-core": "^6.23.1", 
 
       "babel-loader": "^6.4.0", 
 
       "babel-preset-es2015": "^6.22.0", 
 
       "jsx-loader": "^0.13.2", 
 
       "react": "^15.4.2", 
 
       "react-dom": "^15.4.2", 
 
       "webpack": "^2.2.1", 
 
       "webpack-dev-server": "^2.4.1" 
 
     }, 
 
     "dependencies": { 
 
       "jquery": "^3.1.1" 
 
     } 
 
   }

   <!--index.html--> 
 
   <!DOCTYPE html> 
 
   <html lang="en"> 
 
   <head> 
 
       <meta charset="UTF-8"> 
 
       <title>首頁</title> 
 
   </head> 
 
   <body> 
 
   <div id="app"></div> 
 
   <script src="build.js"></script> 
 
   </body> 
 
   </html>

   ::安裝全部依賴 
 
   npm install 
 
   ::運行 
 
   npm run dev

最後在瀏覽器中打開：http://localhost:8181/index.html

詳解package.json中命令：

   webpack-dev-server   //啓動webpack-dev-server 
 
   --progress --colors    //打包進行顯示顏色 
 
   --hot  //開啓模塊熱修復功能 
 
   --content-base ./dist   //設置webpack-dev-server運行的根目錄是 ./dist 
 
   --inline  //使用inline的方式進行頁面自動刷新 
 
   --quiet  //控制檯中不輸出打包信息 
 
   --compress  //開啓gzip壓縮

webpack-dev-server支持兩種自動刷新的方式：

①Iframe mode

在網頁中嵌套一個iframe，將本身的應用注入都這個iframe中，每次文件修改後都是這個iframe進行了reload

②inline mode

也是自動便也打包刷新

參考文獻： http://www.tuicool.com/articles/BZrQ3mv

http://www.javashuo.com/article/p-hyxrmnwn-mk.html