webpack.config

webpack一些配置，要说的大部分在代码注释里了

// options: {
//     presets: [['@babel/preset-env',{
//       // targets: {
//       //   chrome: "67",
//       // },
//       useBuiltIns: 'usage' // 可以按需打包编译Es6的代码，使得打包出来的js没那么大
//     }]],
//     plugins: [["@babel/transform-runtime",
//       {
//         "corejs": 2,
//         "helpers": true,
//         "regenerator": true,
//         "useESModules": false
//       }
//     ]] // 开发第三方库的时候可以用到,如果用到这个插件，那还需要安装@babel/runtime-corejs2 --save
// }


// 官方插件 HtmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把
// 打包生成的js自动引入到这个html文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 第三方插件 删除之前的打包项
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

var path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    // 声明是开发模式还是生产模式
    mode:'development',

    // source-map会映射出错误位置并且单独打包成一个文件，加了inline会把映射代码写入打包的bundle.js文件中，并且精确到了哪行那列
    // 加了cheap就是精确度没那么高但打包速度会快一些，加了module就是连模块的映射一起写入
    // 开发环境建议用cheap-module-eval-source-map，线上建议可以用cheap-module-source-map
    devtool: 'cheap-module-inline-source-map', 
    
    // entry:__dirname+'/app/main.js',
    entry:['./src/js/app.js'],

    // plugins 会在webpack运行到某个时刻的时候，帮你做一些事情
    plugins: [
        // new ExtractTextPlugin({
        //   filename: utils.assetsPath('[name]/styles.[contenthash].css')
        // })
        new CleanWebpackPlugin({
            // //将日志写入控制台
            // //(总是在dry为真时启用)
            // verbose: true,
            // // 模拟文件的删除
            // dry: true,
            // cleanOnceBeforeBuildPatterns: ['./dist/*.*']
        }),
        new HtmlWebpackPlugin({
            // 模板
            template: './index.html',
           // 标题
            title: 'Output Management',
            // 压缩 去掉所有空格
            minify: {
                collapseWhitespace: true //false | true
            },
            // 添加hash
            hash: false
        }),
        // HMR热更新要使用的插件
        // new webpack.NamedModulesPlugin(),
        // new webpack.HotModuleReplacementPlugin()
    ],

    output: {
      path:path.resolve(__dirname,'./dist'),
      // publicPath: 'http://cdn.com.cn',  // 为生成的js文件加上公用的字符
      filename: '[name].bundle.js',
      chunkFilename: '[name].chunk.js'
    },

 	  module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/, //屏蔽不需要处理的文件（文件夹）（可选）
            loader: 'babel-loader'
        },{
            test: /\.less$/,
            use:[
                {
                  loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        // minimize: true,
                        modules: true,
                        // localIdentName: '[name]_[hash:base64:5]',
                        // 保证less里面引入的less文件能再次从下到上编译
                        importLoaders: 2,
                        // camelCase: '[name]'
                    }
                },
                {loader: 'less-loader'},
                // postcss目前作用是为一些css属性添加前缀 例如“-webkit-”
                {loader: 'postcss-loader'}
            ]
            // 方便样式模块化独立开发
            // loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        },{
          test: /\.css$/,
            use:[
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              // placeholder 占位符 例下面的：[ext]和[hash]
              name: '[name].[ext]',
              outputPath: 'img/', //输出文件所处的自动生成的地址
              limit: 2048   //表示2KB，大于2KB就打包成文件形式，小于2KB就直接以base64形式打包到bundle.js里
            }
          }
        },{
          test: /\.(eot|ttf|svg|woff)$/,
          use: {
            loader: 'file-loader',
          }
        }]
    },

    devServer:{
    	// hot: true, // 热更新要使用的配置
        // hotOnly: true,
		   contentBase: './dist', //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
        open: true, // 自动打开一个浏览器显示项目
        // proxy: {
        //   "/api": "http://localhost:3000" // 跨域代理 例如访问localhost:8080下的“./api”会转到localhost:3000
        // },
        historyApiFallback: {index:'./index.html'}, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true, //设置为true，当源文件改变时会自动刷新页面
        port: 8080, //设置默认监听端口，如果省略，默认为"8080"
	  },

	  resolve: {
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['*','.ts', '.js', '.less', '.sass']
    },
};

webpack有很多记不住的东西，仍然需要不断的查询文档来获取解决途径，以上配置也不是完善的。跟脚手架肯定也没法比。不对的地方欢迎指出