webpack配置实例

  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 };

 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 }