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

认识webpack

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

webpack打包初步

一、建立文件、初始化化项目生成package.json、安装webpack、webpack-cli(能够在命令行执行webpack)

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

二、建立目录
建立src/index.js、dist/index.html

最初咱们都是经过非模块化开发方式开发一个应用页面，将逻辑写在js文件中，而后在html中经过script引入js文件。但当应用程序愈来愈复杂，页面须要引入的js文件就会愈来愈多，在浏览器端每个文件的加载都会作一次请求。而webpack的好处之一就是能够将应用程序依赖的全部的包打包成一个js文件供index.html主页面引用，大大减小了加载的文件数量。

三、执行npx webpack 打包文件

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

四、自定义webpack配置文件

对于复杂的应用程序须要更复杂的配置能够经过建立webpack.config.js文件来自定义配置。

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

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

五、package.json中配置脚本

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

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

六、自动刷新页面

参考资料：

• webpack入门