webpack: 四个核心概念

webpack的三种方式:
命令行工具
配置文件
node中使用

Webpack四个核心概念:
Entry: 告诉webpack入口文件在哪
Output: 告诉webpack把编译好的文件放在哪里
Loaders: 告诉webpack在添加到依赖图之前如何转换,比如es6转es5,sass转css
Plugins: 在编译的过程中添加你想要的任何操作,loader做不了的事情

基础配置文件:

这个文件应该放在webpack的根目录下

        module.exports = {                   // 暴露对象
    entry: "",                       // 字符串或者对象
    output: "",                      // 初始文件
    module: {                        // Loaders 置开发模式还是生产模式
        rules: [{
            test:/\.js$/,            // 正则个则表达式
            use: ["babel-loader"]    // 做什么
        }]
    },
    plugins: [                       // Plugin 插件
        new
    ]
}

      

可以把这个对象写成一个函数，这样可以使用env传参

        module.exports = (env) => {
    console.log(env)
 return {
        mode: env.mode
    }
}
      

使用es6写法

        $ npm install html-webpack-plugin
      

下载第三方库

        const htmlWebpackPlugin = require("html-webpack-plugin"); // 导入html-webpack-plugin
// 导入html-webpack-plugin
const webpack = require("webpack");
// webpack内置插件
module.exports = ({mode}) => {        // 对象解构赋值
 return {
        mode,                         // es6写法 属性明和值一直写一个即可
        entry: "./src/index1.js",     // 入口文件 需要手动创建该文件(可以上多个文件，使用对象)
        output: {                     // 出口打包的文件
            path: __dirname + "/build",  // 要使用绝对路径，可以使用node变量__dirname (默认dist/目录)
            filename: "bundle.js"        // 更改文件,可以生成文件(默认main.js)
        },
        plugins: [                       // 插件上的项上是构造函数 
            new htmlWebpackPlugin({      // 自动生成html文件，并把build.js文件引入
                template: "./index.html" // 引入自己写的html文件(模版)
            }),
            new webpack.ProgressPlugin() // 可以显示进度 可以在包很大的地方使用
        ]
    }
}

      

网络插件

        $ npm install webpack-dev-server
      

下载完该插件后.bin/目录下会有一个webpack-dev-server的文件夹，在webpackage.json里写一个这个命令的脚本

使用npm run dev运行后进入测试连接，这个页面可以随文件的改动自动刷新，但是这写代码上直接放在内存中的，不会打包。可以自动添加按钮、div等等。

等运行结束，我们再使用npm run prod生成真实的打包文件

开发模式和生产模式配置文件分离

在根目录下新建文件夹build_utile(可自定义)，在该文件下分别创建webpack.development.js(开发模式配置)和webpack.production.js(生产模式配置)文件。

webpack.development.js

        module.exports = {
    output: {
        filename: "bundle.js"
    }
}
      

webpack.production.js

哈希值: 防止用户因缓存不更新新内容，哈希值由内容决定，内容改动，哈希文件名就改变，用户没有，再次请求

        module.exports = {
    output: {
 // filename: "main.js"
        filename: "[chunkhash].js" // 哈希
    }
}
      

下载merge模块

        $ npm install webpack-merge --save-dev
      

引入merge模块: 可以把两个对象融合

        const htmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const webpackMerge = require("webpack-merge")                // 引入merge
const configMode = mode => {                                 // 回调函数
    return require(`./build_utile/webpack.${mode}.js`)       // 接收模式
}
module.exports = ({mode}) => {
    return webpackMerge({                                  // return Merge 返回一个函数
        mode,
        entry: "./src/index1.js",
        plugins: [
            new htmlWebpackPlugin({
                template: "./index.html"
            }),
            new webpack.ProgressPlugin()
        ]
    },configMode(mode))                                     // 使用回调函数
}