【前端工程】前端打包之webpack(一)

认识webpack

webpack_是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)_。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个_bundle_。

webpack打包初步

1、创建文件、初始化化项目生成package.json、安装webpack、webpack-cli(可以在命令行执行webpack)

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

2、创建目录
创建src/index.js、dist/index.html

最初我们都是通过非模块化开发方式开发一个应用页面，将逻辑写在js文件中，然后在html中通过script引入js文件。但当应用程序越来越复杂，页面需要引入的js文件就会越来越多，在浏览器端每一个文件的加载都会做一次请求。而webpack的好处之一就是可以将应用程序依赖的所有的包打包成一个js文件供index.html主页面引用，大大减少了加载的文件数量。

3、执行npx webpack 打包文件

npx会执行webpack包中的二进制文件，默认将src中的index.js作为应用程序的文件入口，将所以依赖的文件打包成一个main.js输出到dist文件夹中。index.html引入main.js文件就可以访问到页面内容。

4、自定义webpack配置文件

对于复杂的应用程序需要更复杂的配置可以通过创建webpack.config.js文件来自定义配置。

例如自定义入口文件、输出文件的名称和目录等等。

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

5、package.json中配置脚本

scrips中配置命令行，npm run build代替npx webpack 打包文件。

执行npm run build就会将entry指定的入口文件./src/index.js中的内容打包到指定的dist/bundle.js中。

6、自动刷新页面

参考资料：

• webpack入门