webpack配置详解

webpack.config.js

entry：入口文件 

       入口文件  可以为单入口  也可以为多入口

output  ：打包生成的文件

        filename  打包生成的文件

        path：打包完成之后  生成的目录

plugins :  使用插件之前  必须new出来一个实例对象

       CleanWebpackPlugin   删除上一次打包的文件

       HtmlWebpackPlugin  找到指定的html模板文件

          template：本地模板文件的位置

          filename:  输出文件的文件名称 默认为index.html

          title:生成的html文档的标题   在模板文件生成这里配置的title信息   

         chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

module：模块受到影响的选项。我个人理解就是要打包的模块会受到它配置的影响而发生一些可控的变化。常见的就是里面的rules，主要说也是这一部分。

      rules：顾名思义，定规则的，怎么定呢？看有 test，正则表达式，那么要打包的模块是要进行匹配啊，匹配做啥？匹配的模块就要按照Loader的规则进行变化了。

           use：通过使用不同的 loader，webpack 有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换 scss 为 css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件。

devtool  ： ‘inline-source-map’ 准确的打印出js加载过程中  错误出现在哪一个文件里面

devServer.contentBase    配置DevServer HTTP服务器的文件根目录。默认情况下为当前执行目录，所以一般不必设置它，除非有额外的文件需要被DevServer服务。例如你想把项目根目录下的public目录设置成DevServer服务器的文件根目录

const path = require('path');       //用node的方式  引入路径模块
//const CleanWebpackPlugin = require('clean-webpack-plugin');  //引入删除上一次打包文件的插件
//新的cleanWebpackPlugin的语法
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');     //引入html模板插件
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
//讲css打包为一个文件  该插件暂不支持webpack4的版本 下载的时候  npm install extract-text-webpack-plugin@next 
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: { 
    main: ['babel-polyfill','./src/index.js'],
    other: ['babel-polyfill','./src/other.js']
  },
  output: {
    filename: '[name].bundle.[hash].js',
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new OpenBrowserPlugin({
           url: 'http://localhost:8080'
    })
    /*
    new CleanWebpackPlugin(['dist'], {
          root: path.resolve(__dirname, '../')
    }),*/
    //新的cleanWebpackPlugin的使用方法
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      title: '主页面',
      chunks: ['main', 'commons']
    }),
    new HtmlWebpackPlugin({
      template: 'src/other.html',
      filename: 'other.html',
      title: '其他页面',
      chunks: ['other', 'commons']
    }),
    //使用插件解析css成文件的时候 的目录和文件名
    new ExtractTextPlugin('./css/style.css')
  ],
  //提取公共文件
  optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
  module: {
    rules: [{
	  test:/\.js/,
	  exclude:/(node_modules)/,
	  use:{
	    loader:'babel-loader',
	    options:{
	      presets:['latest','stage-2']
	    }
	  }
	},
	{
	  test: /\.(png|jpg)$/,
	  use: [{
	      loader: 'url-loader',  //使用url-loader的时候要下载 file-loader url-loader这两个包
	      options: {
	        limit: 8192,
            outputPath:'./images/',   //生成的文件路径
			publicPath:'../images/'   //在css文件里面的引用路径
	      }
	    }]
	},
	{
	  test: /\.css$/,
	  //这里是解析成style标签  use: ['style-loader', 'css-loader', 'postcss-loader']
      //下面是使用插件解析成css文件
      use: ExtractTextPlugin.extract({
		fallback: "style-loader",
		use: "css-loader"   //  use:['css-loader','postcss-loader']
	  })
	}]
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, '../dist')
  },
  mode: 'development'
};

这样的配置是可以去解析很多es6的API的    但是建议"babel-loader": "^7.1.4",   babel-loader8的版本好像有点不兼容之间的版本   所以我采用的还是7的版本   类似babel-core  babel-preset-stage-2   都是6的版本