webpack配置实例

webpack.config.js

const config = require('./config.json');
const ExtractTextPlugin = require('extract-text-webpack-plugin');//输出单独文件插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob');
const path = require('path');
const extractLess = new ExtractTextPlugin({
    filename:'styles/[name].css'
});

let files = glob.sync('app/view/*.html');
let hwps = [];
files.forEach(function(pathname){
    hwps.push(new HtmlWebpackPlugin({
        template:pathname,
        filename:pathname.replace('app/view/',''),
        css:['styles/main.css'],
        js:['bundle.js'],
        inject: true
    }));
});


module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/app/main.ts",//已多次提及的唯一入口文件
    output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "scripts/bundle.js"//打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        port: 6969
    },
    module:{
        rules:[
            {
                test:/(.ts)$/,
                use:'ts-loader'
            },
            {
                test:/.less$/,
                use:extractLess.extract({
                    fallback:'style-loader',
                    use:[
                        {
                            loader:'css-loader',
                            options:{
                                importLoaders: 1,
                                sourceMap:true
                                //minimize: true //压缩css
                            }
                        },
                        {
                            loader:'postcss-loader',
                            options:{
                                plugins:[
                                    require('autoprefixer')()
                                ],
                                sourceMap: 'inline'
                            }
                        },
                        {
                            loader:'less-loader',
                            options:{
                                sourceMap:true
                            }
                        }
                    ]
                })
            },
            {
                test:/.(png|jpe?g|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192,
                            name:'/assets/images/[name].[ext]'
                        }
                    }
                ]
            },
            {
                test:/.html$/,
                use:['html-loader']
            },
            {
                test:/.svg$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192,
                            name:'/assets/svgs/[name].[ext]'
                        }
                    }
                ]
            },
            {
                test:/.(ttf|woff2|eot|woff)($|?)/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'assets/fonts/[name].[ext]'
                        }
                    }
                ]
            }/* ,
            {
                test: /.tmpl/,
                loader: "templatejs-loader",
                query: {
                    sTag: '<#',
                    eTag: '#>',
                    expression: 'require("template_js")'
                }
            } */
        ]
    },
    plugins:[
        extractLess,
        ...hwps,
        require('autoprefixer')
        //new UglifyJSPlugin()  //压缩js
    ],
    resolve:{
        extensions:['.ts','.js']//忽略后缀
    }
};

package.json

{
  "name": "xinanguoji",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "server": "webpack-dev-server"
  },
  "author": "m_y",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "postcss-loader": "^2.0.8",
    "style-loader": "^0.19.0",
    "templatejs-loader": "^0.1.1",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "template_js": "0.6.1"
  }
}