webpack

什么是webpack

• 官方解释

  At its core,webpack is a static module bundler for modern javaScript applications

  • 从本质上来讲，webpack是一个现代的JavaScript的静态模块打包工具
• 何谓模块？
  • 现在大多数前端模块化的方案：AMD、CMD、CommonJS、ES6，在ES6之前我们要想进行模块化开发，必须借助于其他工具，让我们进行模块化开发，并且在模块化开发完成了项目后，需要处理模块间的各种依赖，并且进行整合打包。
  • 而webpack就是可以帮我们处理模块间的依赖关系，并且还可以将CSS、图片、json文件等等在webpack当作模块来使用
• 何谓打包？
  • 就是将各种模块进行打包整合并成一个或多个包，还可以对资源进行处理，比如：压缩图片、将scss转成css、将ES6语法转成ES5语法等
• webpack与grunt/gulp有什么区别
  • 如果仅仅只是打包整合，grun/gulp更适合，更适合前端流程自动化，对于模块化并非它的核心。
  • webpack更强调模块化开发，同时也会对资源进行打包整合

webpack的安装

• 安装webpack 需要先安装node.js,Node.js自带了软件包管理器（npm）。-- 由于NPM下载包需要越墙下载，不使用国内的源会很慢，这里建议换好国内的源再使用Npm
• 全局安装webpack：npm install webpack -g

webpack的使用

• 准备工作-文件夹的解析
  • dist文件夹：用于存放打包后的文件
  • src文件夹：用于存放我们写的源文件
    • main.js：项目入口的文件，模块化入口
  • index.html：浏览器打开展示的首页
  • package.json：通过npm init生成的，npm包管理的文件
• js文件的打包
  • 没有打包工具之前，我们通常是在index.html引入js文件，这种方法会很麻烦且因为引入顺序的关系，一些代码无法识别。
  • 所以我们只需要通过将main.js打包成一个文件，这样的话引入时就会方便很多。
  • webpack打包指令
    • webpack src/main.js dist/bundle.js

webpack的配置

• 我们通常情况下不会直接使用webpack原生的打包指令，会显得麻烦，且直接指定位置会很不方便。

  • 我们可以新建一个webpack.config.js文件来写上需要打包的文件和打包好的文件-即 入口和出口

                  //因为path需要绝对路径，所以我们需要这个包来动态获取路径
  //在导入这个包前需要 npm init，init完成后会出现package.json
  const path = require(‘path‘)
  
  module.exports = {
    //入口：可以是字符串、数组、对象，这里入口只有一个，所以写作字符串
    entry: ‘./src/main.js‘,
    output: {
    //出口：通常是一个对象，里面有两个重要属性：path和filename
      path: path.resolve(__dirname, ‘dist‘),
      filename: ‘bundle.js‘
    },
  }
  
              

• 大部分项目都会有一个本地安装的webpack来进行运行项目，那么怎样使用本地的webpack而不是全局的webpack呢？

  1. 如果项目中没有本地webpack则需要安装
  • 在项目文件夹下运行命令

                  npm install webpack@版本号 --save-dev
  
              

  2. 之后就需要更改package.json中的scripts来修改build的运行命令："webpack"
  3. 此时运行npm run build就可以执行本地的webpack

• webpack loader的使用

  • 通常情况下，webpack对一些我们需要打包的css、图片、ES6转ES5等打包文件是不支持，所以我们需要Lader来进行配置
    1. 查看webpack官网对应Loader使用方法，进行配置
    2. 通过npm来下载对应loader
    3. 在webpack.config.js的modules关键字来进行配置
    4. 注意：modules中对loader的加载是从右往左加载，所以对应需要先加载的要放右边。
    5. 然后在入口处把对应的文件引入即可。
  • 图片loader使用注意：
    • 在图片loader的使用中，有两种方式：
      • url-loader：一种是够小（webpack.config.js中对应options中limit大小以下）的图片直接以base64的方式发送到网页上。
      • file-loader:大于url-loader我们就需要直接将图片打包上传，但在打包中图片会返回原有的路径经行储存
        • 所以我们需要在output下的publicPath:‘指定一个文件夹‘
        • 还需要在对应option下对name:‘img/指定文件名‘放在该位置下并且重命名
          • [指定文件名]中变量写法：
            • name:获取图片原来的名字，放在该位置
            • hash:8：为了防止图片名称冲突，依然使用hash，但我们只保留8位
            • ext：使用图片原来的扩展名

• webpack配置Vue

  1. 使用Vue.js必须引入Vue.js。

                  npm install vue --save
  
              

  2. 经过上一步仍然不能完成，因为Vue构建的版本不同，默认运行的是runtime-only 的Vue这个版本不能运行template.所以修改
     webpack.config.js 中

                  resolve: {
  // alias: 别名
  alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘
    }
  }
  
              

  3. 最后一步依然需要引入loader使webpack可以打包Vue文件

                  npm install vue-loader vue-template-compiler --save-dev
  //并配置
  {
    test: /\.vue$/,
    use: [‘vue-loader‘]
  }
  
              

• webpack配置plugin

  • plugin 主要是对现有架构进行的扩展
  • 使用步骤：
    1. 通过npm安装所需要使用的plugins
    2. 在webpack.config.js中的plugins配置插件

                  plugins: [
      //配置打包 html 的 htmlwebpackPlugin
      new HtmlWebpackPlugin({
        //以现有的文件为模板来打包
        template: ‘index.html‘
      }),
      new UglifyjsWebpackPlugin()
  ],
  
              

• 利用webpack 搭建本地服务器

  1. 安装服务器模块

                  所下载的服务器模块版本需要对应webpack的版本
  npm install webpack-dev-server --save-dev
  
              

  2. 修改webpack.config.js中文件配置

                  devServer: {
  //为哪个文件夹提供本地服务，默认为根文件夹
  contentBase: ‘./dist‘,
  //是否为实时刷新
  inline: true
  }
  
              

  3. 如果直接使用原生命令会全局寻找，所以我们继续配置package.json

                  "dev": "webpack-dev-server --open"
  
              

                  npm run dev
  
              

原文：https://www.cnblogs.com/chuncode/p/12984779.html