webpack----js的静态模块打包器

webpack----js的静态模块打包器

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

简介

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

官方文档

https://www.webpackjs.com/

安装

cnpm i webpack -g //--save（加载到项目依赖）

使用

设置入口

使用webpack需要一个入口文件，也就是入口起点，进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

创建配置文件

需要创建配置文webpack.config.js

module.exports = {
  entry: './src/lib/index.js'
};

设置出口

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

module.exports = {
  entry: './src/lib/index.js'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-name.bundle.js'
  }
};

处理非js文件

webpack使用的是loader，loader 可以让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

module.exports = {
  entry: './src/lib/index.js'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-name.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  }
};

插件

插件则可以用于执行范围更广的任务

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
module.exports = {
  entry: './src/lib/index.js'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-name.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]  
};

感谢

webpack

以及勤劳的自己