vue -webpack基础打包

认识webpack

目前前端开发变得越来越复杂

• 比如开发过程中需要模块化的方式来开发
• 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、ts开发脚本逻辑、通过Sass、less等方式来编写css样式代码
• 开发过程中还希望实时监听文件的变化并反映到浏览器上，提高开发效率
• 开发完成后我们还需要将代码进行压缩、合并及其他相关优化；

但很多前端开发人员并不需要考虑这些问题，因为目前前端开发通常使用三大框架，框架创建的过程要借助于脚手架（cli）,vue-cli......都是基于webpack来帮助我们支持模块化、less、ts、打包优化等；

webpack到底是什么

官方文档给出的解释是：webpack是一个静态的模块化打包工具，为现代的javaScript应用程序、
通过这句话可以得到以下几个关键词

关键词	解释
打包bundler	webpack进行打包，所以他是一个打包工具
静态的static	我们最终可以将代码打包成最终的静态资源（部署到静态服务器）
模块化module	webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等
现代化modern	现代前端开发面临各种各样的问题，才催生了webpack的出现和发展

webpack的运行是依赖node环境的，所以我们电脑上必须有node环境

webpack的安装

npm install webpack webpack-cli -gl

他们是什么关系

• 执行webpack命令会执行node_modules下的bin目录下的webpack
• webpack在执行时时依赖webpakck-cli的，如果没安装会报错
• 而webpack-cli中代码执行时，才能利用webpack进行编译和打包的过程
• 所以在安装webpack时，需要同时安装webpack-cli

入口起点(entry points)

入口起点告诉 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点之后,webpack 就会#找出有哪些模块和库是入口起点直接、间接依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

module.exports = {
  entry: './path/to/my/entry/file.js',
};
dependOn：当前入口文件依赖的入口文件，即必须在入口文件被加载之前加载依赖的入口文件
filename：指定当前入口文件构建后输出的文件名称
import：启动构建时被夹加载的模块
library：配置入口文件的选项
runtime：运行时 chunk 的名称，如果设置了此选项将会创建一个同名的运行时 chunk，否则将会使用入口文件作为运行时

Output

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。注意，即使可以存在多个 entry 起点，但只能指定一个 output 配置。

Module

模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Plugin

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

栗子

module.exports = {
  devtool: false,
  mode: 'development',
  entry: './index.js',// 入口文件
  output: {
    // 输出文件名称
    filename: 'bundle.js',
    // 输出文件路径
    path: path.join(__dirname, './'),
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 正则匹配后缀名为 .css 的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
  devServer: {
    contentBase: './',// DevServer 根目录
    port: 8080,// DevServer 端口
    open: true,// 打开浏览器
  },
};