webpack 基本配置 - 01

Posted 2020-08-11 懦酷

 1 const webpack = require(‘webpack‘);
 2 const path = require(‘path‘);
 3 const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
 4 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 5 const CleanPlugin = require(‘clean-webpack-plugin‘);
 6 
 7 const PATH = {
 8      src:path.join(__dirname, ‘src‘),
 9      build:path.join(__dirname, ‘build‘)
10 }
11 
12 module.exports ={
13 
14     entry:{
15         app:PATH.src,
16         // vendor:[
17         //     PATH.src+‘/common/jquery‘,
18         //     PATH.src+‘/common/layer/layer‘
19         // ]
20     },
21     output:{
22         // publicPath 配置上线时的路径
23         // 可有效解决css loader 和url loader路径不一致问题
24         publicPath:‘/‘,
25         path:PATH.build,
26         filename:‘./js/[name].js‘,
27         chunkFilename:‘./js/[name].chunck.js‘
28     },
29     module:{
30         loaders:[
31             {
32                 test:/\.(png|gif|jpg|jpeg)$/,
33                 exclude: /node_modules/,
34                 loader:‘url?limit=7000&name=images/[name].[ext]‘,                
35             },
36             {
37                 test:/\.css$/,
38                 exclude: /node_modules/,
39                 loader: ExtractTextPlugin.extract("style-loader", "css-loader")
40             }
41         ]
42     },
43     plugins:[
44         new CleanPlugin([‘build‘]),
45         new ExtractTextPlugin(‘css/[name].css‘),
46         new HtmlWebpackPlugin({
47             title:‘webpack demo‘,
48         }),
49         // 压缩
50         // new webpack.optimize.UglifyJsPlugin({
51         //     compress:{
52         //         warnings:false
53         //     }
54         // })
55     ],
56     devServer: {
57         compress:true,
58        inline: true,
59        compiler:{
60                hot:true
61        }
62        
63     }
64 
65 }