webpack之核心概念（二）

webpack的默认配置文件是webpack.config.js，如果不想使用这个文件，可以在package.json的script中修改命令，方法如下

"scripts": {
  "test": "webpack --config 文件地址.js"
 },

1.webpack.config.js的基本配置

module.exports = {
    entry: "./src/index.js", //打包⼊⼝⽂件
    output: "./dist", //输出结构
    mode: "production", //打包环境
    module: {
        rules: [
            //loader模块处理
            {
                test: /\.css$/,
                use: "style-loader"
            }
        ]
    },
    plugins: [] //插件配置
};

2.entry入口

配置打包文件的入口

//单文件的入口
entry:{
 main: './src/index.js'
}
==相当于简写===
entry:"./src/index.js"

//多⼊⼝ entry是个对象
entry:{
 main:"./src/main.js",
 index:"./src/index.js"
}

3.output出口

经过webapck打包后的文件放在磁盘的位置

// 单文件入口处理
output: {
 filename: "bundle.js",//输出⽂件的名称
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},

//多⼊⼝的处理
output: {
 filename: "[name][chunkhash:8].js",//利⽤占位符，⽂件名称不要重复
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},

4.mode打包模式

一般用于告知 webpack 使用相应的模式进行内置优化。mode的默认值为production

mode:"development",//开发环境 process.env.NODE_ENV 的值设置为 development
mode:"production",//生产环境 process.env.NODE_ENV 的值设置为 production

5.module模块化

这个用来配置项目中不同类型的模块，例如.css文件、.js文件、图片文件等等。

module:{
   rules:[{
   	test:/\.xxx$/,//指定匹配规则
   	use:{
   		loader: 'xxx-load'//指定使⽤的loader
   	}
   }]
}

6.plugins插件

plugin 可以在webpack运行到某个阶段的时候，帮你做⼀些事情，类似于生命周期的概念
扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。可以作用于整个构建过程，可以访问该页面了解有些什么插件可以使用。下面使用 html-webpack-plugin举例

// 安装
npm install --save-dev html-webpack-plugin

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
 plugins: [
	 new htmlWebpackPlugin({
		 title: "My App",
		 filename: "app.html",
		 template: "./src/index.html"
	 })
 ]
};