webpack4.x实战二，配置文件-优快云博客

本文详细介绍了一个合理的Webpack项目结构，包括目录布局、文件组织、依赖安装及配置过程。通过具体示例，如app.js、style.css的编写，以及webpack.config.js的设置，展示了如何实现JS和CSS的模块化加载和打包。

创建一个比较合理的项目结构。使用 webpack.config.js 简化打包命令。

创建webpack项目

目录结构

├── dist                #webpack打包后文件路径
│   └── index.html      #网站首页index.html
├── src                 #源文件目录
│   ├── css             #css文件目录
│   │   └── style.css   #样式文件
│   └── js              #js文件目录
│       └── app.js      #js文件
└── webpack.config.js   #webpack配置文件
复制代码

初始化项目

执行命令npm init

安装webpack、css-loadoer、style-loader，npm install --save-dev webpack css-loader style-loader

编写app.js、style.css文件

app.js文件内容

require('../css/style.css'); //相对路径，相对的文件为webpack配置文件中entry对应的文件(这里是app.js)。

function hello(str) {
    console.log(str);
}

hello('hello world!');
复制代码

style.css文件内容

*{
    padding: 0;
    margin:0;
}
body{
    background-color: #f5f5f5;
}
复制代码

index.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack.config.js学习</title>
    <script src="js/app.bundle.js"></script>
</head>
<body>
    
</body>
</html>
复制代码

编写webpack配置文件webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            }
        ]
    }
};
复制代码

详细说明：

require('path');:使用CommonJS规范，引入path模块，该模块能获取绝对路径。引入模块，可以不用加后缀。

模块查找流程图

模块查找顺序如下

1. 从module path数组中取出第一个目录作为查找基准。
2. 直接从目录中查找该文件，如果存在，则结束查找。如果不存在，则进行下一条查找。
3. 尝试添加.js、.json、.node后缀后查找，如果存在文件，则结束查找。如果不存在，则进行下一条。
4. 尝试将require的参数作为一个包来进行查找，读取目录下的package.json文件，取得main参数指定的文件。
5. 尝试查找该文件，如果存在，则结束查找。如果不存在，则进行第3条查找。
6. 如果继续失败，则取出module path数组中的下一个目录作为基准查找，循环第1至5个步骤。
7. 如果继续失败，循环第1至6个步骤，直到module path中的最后一个值。
8. 如果仍然失败，则抛出异常。
复制代码

module.exports：对象是由模块系统创建的。在写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。

module.exports = {
    mode: 'development',                        //开发模式
    entry: './src/js/app.js',                   //webpack入口js文件，单入口
    output: {                                   //webpack输出配置
        path: path.resolve(__dirname, 'dist'),  //输出路径。获取dist绝对路径
        filename: 'js/app.bundle.js'    //输出文件名称。订单app.js打包后的文件名称
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //正则表达式，处理css结尾的文件
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] //先用css-loader读取css文件，再用style-loader渲染css样式
            }
        ]
    }
}
复制代码

修改package.json文件

修改scrips信息

"scripts": {
    "webpack":"webpack --config webpack.config.js --progress --display-moudle  --colors --display-reasons"
  },
复制代码

执行命令npm run webpack 第一次会提示安装

 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): 
复制代码

输入 yes安装

> test3@1.0.0 webpack /Users/chen/data/www/html5/webpack/test3
> webpack --config webpack.config.js --progress --display-moudle  --colors --display-reasons

Hash: f5121f55990fdb5ec6d7
Version: webpack *.**.*
Time: 75ms
Built at: ****-**-** **:**:**
           Asset      Size  Chunks             Chunk Names
js/app.bundle.js  4.19 KiB    main  [emitted]  main
Entrypoint main = js/app.bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/css/style.css] 216 bytes {main} [built]
    cjs require !!../../node_modules/css-loader/dist/cjs.js!./style.css [./src/css/style.css] 2:14-80
[./src/css/style.css] 1.07 KiB {main} [built]
    cjs require ../css/style.css [./src/js/app.js] 1:0-27
[./src/js/app.js] 94 bytes {main} [built]
    single entry ./src/js/app.js  main
    + 3 hidden modules
复制代码

dist目录结构：

dist
├── index.html
└── js
    └── app.bundle.js
复制代码

浏览器访问 dist/index.html文件

总结

CommonJS

require ：加载对应的模块。相对路径，相对的文件是webpack配置文件中entry对应的文件(这里是app.js)
module.exports: 模块中，定义js文件对外暴露的接口。
复制代码

webpack.config.js

module.exports = {
    mode: 'development',                       //开发模式
    entry: './src/js/app.js',                 //webpack入口js文件，单入口
    output: {                                 //webpack输出配置
        path: path.resolve(__dirname, 'dist'),  //输出路径。获取dist绝对路径
        filename: 'js/app.bundle.js'                   //输出文件名称。订单app.js打包后的文件名称
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //正则表达式，处理css结尾的文件
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] //先用css-loader读取css文件，再用style-loader渲染css样式
            }
        ]
    }
}
复制代码