webpack学习之webpack.config.js详解

 一、webpack基础配置

 

1. 在项目根目录创建 webpack.config.js 文件，只能是这个文件名
   
   
2. 打开 webpack.config.js ，开始编写配置信息

   // 输出模块
   // __dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录。
   module.exports = {
       entry: __dirname + "/src/index.js", // 唯一入口文件
    
       output: {
           path: __dirname + "/dist", // 打包后的文件存放的路径
           filename: "bundle.js" // 打包后输出文件的文件名
       }
   };
   
   

   module.exports：输出模块的意思
   entry：指定项目的入口
   output：指定项目的出口
3. 在当前项目根目录运行 webpack 命令，进行打包，得到dist下的打包文件bundle.js
   该命令会默认去根目录寻找 webpack.config.js 配置文件，如果没有，则会使用 webpack 的默认配置进行打包，详情请百度  webpack4的0配置说明
   

webpack -p    //打包时，对文件进行压缩混淆。

webpack -d   //生成sourcemap。

二、webpack配置插件

1. html-webpack-plugin : 把编译后的文件（css/js）插入到入口文件中，可以只指定某些文件插入，可以对html进行压缩等

   filename：输出文件名；
   template：模板文件，不局限于html后缀哦；
   removeComments：移除HTML中的注释；
   collapseWhitespace：删除空白符与换行符，整个文件会压成一行；
   inlineSource：插入到html的css、js文件都要内联，即不是以link、script的形式引入；
   inject：是否能注入内容到 输出 的页面去；
   chunks：指定插入某些模块；
   hash：每次会在插入的文件后面加上hash ，用于处理缓存，如：；
   其他：favicon、meta、title ……；

三、webpack之loader

1. loader：webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源
2. 写法如下：在module.exports中添加一个module对象，里面写匹配的规则和对应的loader

   // 输出模块
   // __dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录。
   module.exports = {
       mode: 'development',
       entry: __dirname + "/src/index.js", // 唯一入口文件
       output: {
           path: __dirname + "/dist", // 打包后的文件存放的路径
           filename: "bundle.js" // 打包后输出文件的文件名
       },
       module: {
   	    rules: [
   	      {
   	        test: /\.(png|jpg|gif|jpeg)$/,   //匹配规则，这里是匹配图片
   	        use: [
   	          {
   	            loader: 'url-loader',    // 对应的loader
   	            options: {
   	              limit: 8192     // 图片小于8192则会进行base64编码
   	            }
   	          }
   	        ]
   	      }
   	    ]
   	  }
   };
   
   

3. loader安装
   一般的loader安装命令如下：
   -D: 安装在开发依赖中(打包时不会打包到bundle.js中)；
   -S: 安装在生产环境依赖中(会打包到bundle.js中)

   npm i loader的名字 -D

   如有报错，则说明需要安装其他的所需模块，依次安装即可，如：url-loader依赖file-loader,故需要安装两个loader才能正确打包，否则会报错。但是在配置文件中则不需要写上file-loader。

四、常用loader和plugin配置

// 安装webpack和webpack-cli，因为下面的loader和plugin需要这两个
npm i webpack webpack-cli -D

// 打包图片的url-loader
npm i url-loader file-loader -D

// 处理css、sass、less样式文件的loader
npm i css-loader style-loader -D
npm i sass fibers node-sass sass-loader -D
npm i less less-loader -D

// 将ES6等高级语法的js文件转化为ES5语法的js文件的loader
npm i babel-loader @babel/core @babel/preset-env -D


// 该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。
npm install --save-dev mini-css-extract-plugin

// 到目前为止，我们已经将所有资产手动包含在index.html文件中，但是随着应用程序的增长，一旦您开始在文件名中使用散列并输出多个包，将很难继续index.html手动管理文件。但是，有一些插件可以简化此过程。
npm install --save-dev html-webpack-plugin

// 启动服务并支持热替换
npm i webpack-dev-server -D

对应的 webpack.config.js 配置文件：

// 输出模块
// __dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')



const NODE_ENV = 'development'
const devMode = NODE_ENV !== 'production';


module.exports = {
	mode: NODE_ENV,
	entry: path.join(__dirname, "/src/index.js"), // 唯一入口文件
	output: {
		path: path.join(__dirname, 'dist'), // 打包后的文件存放的路径
		filename: "bundle.js" // 打包后输出文件的文件名
	},
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
    new webpack.DefinePlugin({
      'SERVICE_URL': JSON.stringify('https://127.0.0.1:8000')
    }),
    new HtmlWebpackPlugin({
      title: 'hello world',
      filename: "index.html",
      template: "./index.html"
    }),
  ],
  module: {
		rules: [
			{
				test: /\.(png|jpg|gif|jpeg)$/,
				use: [
				  {
				loader: 'url-loader',
				options: {
				limit: 8192
					}
				  }
				]
			},
      {
        test: /\.css$/,
        use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      ],
	},
};

packge.json文件添加如下代码：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },