webpack: 四个核心概念

本文主要是介绍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))                                     // 使用回调函数
}

这篇关于webpack: 四个核心概念的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！