一篇文章解决webpack的配置及简单案例

webpack配置及简单案例

文件和文件夹解析：

dist文件夹：用于存放 之后打包的文件。
src文件夹：用于存放 源文件。
main.js：项目的入口文件。
mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。
index.html：浏览器打开展示的首页html
package.json：通过npm init生成的，npm包管理的文件

js文件的打包

现在的js文件中使用了模块化的方式进行开发，不可以直接使用 的原因：

• 因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
• 另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。

使用webpack工具，对多个js文件进行打包。命令如下： webpack src/main.js dist/bundle.js

使用打包后的文件

打包后会在dist文件下，生成一个bundle.js文件

• bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，只需要将这个js文件在index.html中引入即可

入口和出口

每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，创建一个webpack.config.js文件，如下：

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

这样就可以避免写webpack src/main.js dist/bundle.js这么长了，而是直接写webpack就OK了。

局部安装webpack

因为 一个项目往往依赖特定的webpack版本 ，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。所以通常一个项目，都有自己局部的webpack。

第一步，项目中需要安装自己局部的webpack

npm install webpack@3.6.0 --save-dev

第二步，启动webpack打包

node_modules/.bin/webpack

package.json中定义启动

通过npm init生成package.json

每次执行都敲这么一长串，因此可以在package.json的scripts中定义自己的执行脚本。

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置：

1. 首先，会寻找本地的node_modules/.bin路径中对应的命令。
2. 如果没有找到，会去全局的环境变量中寻找。

如何执行我们的build指令呢？

npm run build

webpack中使用CSS文件的配置

https://blog.csdn.net/qq_44824148/article/details/113105105