webpack基础（一）webpack的基础配置

本系列文章的webpack版本未webpack4

安装webpack

yarn init -y //初始化工程
yarn add webpack webpack-cli -D

webpack默认配置

• 打包工具-》输出后的结果(js 模块)

npx webpack //webpack所支持的语法

使用上面命令回去寻找node_module下的bin/webpack.cmd文件,文件如下

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\webpack\bin\webpack.js" %*
)

• 打包（支持我们的js模块化）

a.js
export const say = (a) => {
    console.log(a)
}

index.js
import {say} from './a';

say('hello webpack')

打包后直接运行 打印出hello webpack

• 打包默认使用生产环境

生产环境：会进行代码压缩，去掉无关代码等

开发环境：

• webpack功能，解析js模块，以当前js为准查找所有相关的依赖文件。把文件打包成一个文件。自己实现了一套模块化的机制。

手动配置webpack

• 默认配置文件的名字是webpack.config.js
• webpack是ndoe写出来的node的语法

// webpack.config.js 文件
const path = require('path');

module.exports = {
    mode: "development" ,//模式，production development
    entry: './src/index.js', //入口
    output: {
        filename: "bundle.js",   //打包后的文件名
        path: path.resolve(__dirname, 'build')   //必须是绝对路径
    }
};

• webpack.config.js是可以改的。

在node_module/webpack_cli/bin/config/config-yargs.js

79行：defaultDescription: "webpack.config.js or webpackfile.js",

npx webpack --confij webpack.config.mian.js //指定配置文件

package.json文件配置

{
    "scripts":{
        "build":"webpack --config webpack.config.mian.js"
    }
}

{
    "scripts":{
        "build":"webpack"
    }
}

执行：
npm run build -- --config 

webpack打包后结果分析

(function (modules) { // webpackBootstrap
    // 先定义一个缓存
    var installedModules = {};

    // 实现了 __webpack_require__方法
    function __webpack_require__(moduleId) {
        // Check if module is in cache
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // Create a new module (and put it into the cache)
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,   //是否加载完成
            exports: {}
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.l = true;
        // Return the exports of the module
        return module.exports;
    }

    return __webpack_require__(__webpack_require__.s = "./src/index.js"); //入口模块
})
({

    "./src/a.js":
        (function (module, __webpack_exports__, __webpack_require__) {

            "use strict";
            eval("__webpack_require__.r(__webpack_exports__);" +
                "\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"say\", function() { return say; });\n" +
                "const say = (a) => {\r\n    console.log(a)\r\n}\r\n\n\n//# sourceURL=webpack:///./src/a.js?");
        }),

    "./src/index.js":
        (function (module, __webpack_exports__, __webpack_require__) {
            "use strict";
            eval("__webpack_require__.r(__webpack_exports__);" +
                "\n/* harmony import */ var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a */ \"./src/a.js\");" +
                "\n\r\n\r\nObject(_a__WEBPACK_IMPORTED_MODULE_0__[\"say\"])('hello webpack')\r\n\n\n//# sourceURL=webpack:///./src/index.js?");
        })
});

webpack的开发服务

yarn add webpack-dev-server -D

使用

npx webpack-dev-server

特点：不会去真正的打包文件，打包后的文件在内存中。
默认是当前的静态目录。

开发服务的配置

const path = require('path');

module.exports = {
    mode: "development",//模式，production development
    entry: './src/index.js', //入口
    output: {
        filename: "bundle.js",   //打包后的文件名
        path: path.resolve(__dirname, 'build')   //必须是绝对路径
    },
    devServer: {
        //开发服务器的配置
        port: 3000, //端口
        progress: true, //进度条
        contentBase: './build',  //目录
        open: true, //自动打开浏览器,
        compress: true  //gzip压缩。还有其他的,
        historyApiFallback:true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    }
};

HTML插件

yarn add html-webpack-plugin -D

配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",//模式，production development
    entry: './src/index.js', //入口
    output: {
        filename: "bundle.[hash:5].js",   //打包后的文件名,加哈希防止缓存覆盖
        // [hash:8]只显示8位哈希
        path: path.resolve(__dirname, 'build')   //必须是绝对路径
    },
    devServer: {
        //开发服务器的配置
        port: 3000, //端口
        progress: true, //进度条
        contentBase: './build',  //目录
        open: true, //自动打开浏览器,
        compress: true  //gzip压缩。还有其他的
    },
    plugins: [
        // 数组配置所有插件
        new HtmlWebpackPlugin({
            template: './src/index.html',    //模板地址
            filename: 'index.html', //打包后文件，
            minify: {
                removeAttributeQuotes: true, //删除双引号,
                collapseWhitespace:true,    //压缩成一行，
            },
            hash:true, //js文件后增加哈希
        })
    ]
};

生成后资源域名配置

打包后会传上CDN,所有资源都加前缀。如需单独则在各自的loader中加

output: {
        filename: "bundle.[hash:5].js",
        path: path.resolve(__dirname, 'build'),
        publicPath: "http://www.baidu.com/a"
    }