webpack配置實例

webpack.config.js

 1 const config = require('./config.json');  2 const ExtractTextPlugin = require('extract-text-webpack-plugin');//輸出單獨文件插件
 3 const HtmlWebpackPlugin = require('html-webpack-plugin');  4 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');  5 const glob = require('glob');  6 const path = require('path');  7 const extractLess = new ExtractTextPlugin({  8     filename:'styles/[name].css'
 9 });  10 
 11 let files = glob.sync('app/view/*.html');  12 let hwps = [];  13 files.forEach(function(pathname){  14     hwps.push(new HtmlWebpackPlugin({  15  template:pathname,  16         filename:pathname.replace('app/view/',''),  17         css:['styles/main.css'],  18         js:['bundle.js'],  19         inject: true
 20  }));  21 });  22 
 23 
 24 module.exports = {  25     devtool: 'eval-source-map',  26     entry:  __dirname + "/app/main.ts",//已屢次說起的惟一入口文件
 27  output: {  28       path: __dirname + "/public",//打包後的文件存放的地方
 29       filename: "scripts/bundle.js"//打包後輸出文件的文件名
 30  },  31  devServer: {  32         contentBase: "./public",//本地服務器所加載的頁面所在的目錄
 33         historyApiFallback: true,//不跳轉
 34         inline: true,//實時刷新
 35         port: 6969
 36  },  37  module:{  38  rules:[  39  {  40                 test:/(\.ts)$/,  41                 use:'ts-loader'
 42  },  43  {  44                 test:/\.less$/,  45  use:extractLess.extract({  46                     fallback:'style-loader',  47  use:[  48  {  49                             loader:'css-loader',  50  options:{  51                                 importLoaders: 1,  52                                 sourceMap:true
 53                                 //minimize: true //壓縮css
 54  }  55  },  56  {  57                             loader:'postcss-loader',  58  options:{  59  plugins:[  60                                     require('autoprefixer')()  61  ],  62                                 sourceMap: 'inline'
 63  }  64  },  65  {  66                             loader:'less-loader',  67  options:{  68                                 sourceMap:true
 69  }  70  }  71  ]  72  })  73  },  74  {  75                 test:/\.(png|jpe?g|gif)$/,  76  use:[  77  {  78                         loader:'url-loader',  79  options:{  80                             limit:8192,  81                             name:'/assets/images/[name].[ext]'
 82  }  83  }  84  ]  85  },  86  {  87                 test:/\.html$/,  88                 use:['html-loader']  89  },  90  {  91                 test:/\.svg$/,  92  use:[  93  {  94                         loader:'url-loader',  95  options:{  96                             limit:8192,  97                             name:'/assets/svgs/[name].[ext]'
 98  }  99  } 100  ] 101  }, 102  { 103                 test:/\.(ttf|woff2|eot|woff)($|\?)/, 104  use:[ 105  { 106                         loader:'file-loader', 107  options:{ 108                             name:'assets/fonts/[name].[ext]'
109  } 110  } 111  ] 112             }/* , 113  { 114  test: /\.tmpl/, 115  loader: "templatejs-loader", 116  query: { 117  sTag: '<#', 118  eTag: '#>', 119  expression: 'require("template_js")' 120  } 121  } */
122  ] 123  }, 124  plugins:[ 125  extractLess, 126  ...hwps, 127         require('autoprefixer') 128         //new UglifyJSPlugin() //壓縮js
129  ], 130  resolve:{ 131         extensions:['.ts','.js']//忽略後綴
132  } 133 };

package.json

 

 1 {  2   "name": "xinanguoji",  3   "version": "1.0.0",  4   "description": "",  5   "main": "index.js",  6   "scripts": {  7     "test": "echo \"Error: no test specified\" && exit 1",  8     "server": "webpack-dev-server"
 9  }, 10   "author": "m_y", 11   "license": "ISC", 12   "devDependencies": { 13     "autoprefixer": "^7.1.5", 14     "css-loader": "^0.28.7", 15     "extract-text-webpack-plugin": "^3.0.1", 16     "file-loader": "^1.1.5", 17     "html-loader": "^0.5.1", 18     "html-webpack-plugin": "^2.30.1", 19     "less": "^3.0.0-alpha.3", 20     "less-loader": "^4.0.5", 21     "postcss-loader": "^2.0.8", 22     "style-loader": "^0.19.0", 23     "templatejs-loader": "^0.1.1", 24     "ts-loader": "^2.3.7", 25     "typescript": "^2.5.3", 26     "uglifyjs-webpack-plugin": "^1.0.0-beta.3", 27     "url-loader": "^0.6.2", 28     "webpack": "^3.7.1", 29     "webpack-dev-server": "^2.9.2"
30  }, 31   "dependencies": { 32     "bootstrap": "^3.3.7", 33     "template_js": "0.6.1"
34  } 35 }