webpack 4.x的特性与使用

webpack 4.x的特性

• webpack 4.x有个很大的特性，就是约定大于配置，目的是为了减少配置文件的体积；
  • 约定默认的打包入口路径是src/index.js，也就是说，不需要在配置entry模块了；
  • 约定默认的打包输出路径是dist/main.js；
    • 所以说现在的项目中，可以不用特地去配置入口和出口路径，只需要在指定的目录下建立对应的js文件即可。
  • webpack 4.x将CLI（命令行工具）已经转移到了一个单独的包webpack-cli,所以使用webpack需要npm install webpack webpack-cli -g

wepack 4.x的几个基本模块

模块

• 通过将 mode 参数设置为 development, production 或 none，可以启用对应环境下 webpack 内置的优化。默认值为 production。
  • development：生产环境，不压缩；
  • production：部署环境，需要压缩；

入口entry

• 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的;
• 默认值是 ./src/index.js；
• 可以手动设置；

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口output

• output属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js，其他生成文件的默认输出目录是 ./dist。

const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 绝对路径
    filename: 'my-first-webpack.bundle.js' // 输出的js文件名
  }
};

loader

• 由于webpack自身只支持js文件，所以当解析其他文件时，需要使用loader来让webpack去处理那些非javascript文件，并且先将他们转换为有效的模块，然后在添加到依赖图中；
• 在webpack中配置loader必须有两个特征：
  • test属性，用于标识出应该被对应的loader进行转换的某个文件；
  • use属性，表示进行转换时，应该使用哪个loader
• 注：
  • 对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。
  • 在 webpack 配置中定义 loader 时，要定义在module.rules 中，而不是 rules。

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

插件plugins

• loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，插件的范围包括：打包优化、资源管理和注入环境变量。
• 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中，先定义一个实例对象，因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}) // 打包生成的js文件，将运行在最基本的html模板中
  ]
};

• 其中html-webpack-plugin 会为你的应用程序生成一个 html 文件，然后自动注入所有生成的 bundle。

• 配置resolve

resolve: {
    extensions: ['.js','.jsx','.json','.css','.less']  // 表示这些文件的后缀名，忽略不计；
    alias: {
        '@': path.join(__dirname,'./src')  //这样，在项目中,`@`就表示项目根目录src的这一层路径；
    }
}

webpack的基本使用步骤以及对应的模块

• npm init -y 快速启动项目

• 创建最基本的目录结构，项目文件下建立一下文件夹以及文件；

  • src文件夹
  • dist文件夹
  • webpack.cofig.js文件

• npm i webpack webpack-cli -D引入webpack；

• npm i webpack-dev-server -D配置实时刷新

  • 需要去package.json下的scripts中：
  • 增加内容为："dev":"webpack-dev-server --open --port 3000 --hot"
    • --open：表示自动打开浏览器
    • --hot：实现热刷新
    • --port 3000：改变端口号
    • --progress：打包进度
    • --compress：压缩
  • 此时：启动的项目打包后的main.js是在项目的根路径下，是在虚拟磁盘下，不是物理磁盘；

基本配置结构

module.exports = {
    entry: '', // 入口文件
    output: {}, // 出口文件
    module: {}, // 处理对应模块
    plugins: [], // 对应的插件
    resolve: {}, // 其中的`extensions:[]`配置忽略后缀名
    devServer: {}, // 开发服务器配置
    mode: 'development' // 模式配置
}

基本webpack.config.js文件的配置

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
  entry:{
    index:'./src/js/index.js',
  },
  output:{
    path: path.resolve(__dirname,'dist'),
    filename: '[name].bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({
        template:'./src/template.html',
        filename:'index.html',
    })
  ],
  devServer:{
    // 配置本地跨域代理
    "/api": {
      target: 'http://localhost:8888',
      pathRewrite: {'^/api' : ''},
      changeOrigin: true
    }
  },
  module:{
    rules:[
      {
        test:/\.css$/,  //以点开始css结尾的文件
        use:['style-loader','css-loader']   //顺序不能搞错
      }
    ]
  },
}