wabpack打包工具使用方法

wabpack

简介：

一款针对JavaScript的代码模块打包工具

将多个模块整合或打包到一个出口或者几个极少量的出口的js文件上；并且，这个文件是能够被浏览器解析的。

用处/优势：

如果你曾经遇到过以下任何一种情况：

1、载入有问题的依赖项；

2、意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库，使项目膨胀；

3、意外的两次载入（或三次）库；

4、遇到作用域的问题 —— CSS 和 JavaScript 都会有；

5、寻找一个让你在 JavaScript 中使用 ；

6、Node/Bower 模块的构建系统，要么就得依靠一个令人发狂的后端配置才能正确地使用这些模块；

7、需要优化资产asset交付，但你担心会弄坏一些东西 等等……；

那么你可以从 Webpack 中收益了。它通过让 JavaScript 轻松处理你的依赖关系和加载顺序，而不是通过开发者的大脑。最好的部分是，Webpack 甚至可以纯粹在服务器端运行，这意味着你还可以使用 Webpack 构建渐进增强式网站

webpack是用于现代JavaScript应用程序的模块绑定器。当Webpack处理您的应用程序时，它递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有这些模块打包到少量的捆绑（通常只有一个），由浏览器加载。这是非常可配置的，但要开始，您只需要了解六大核心概念：输入(entry)，输出(output)，加载程序(loader),插件(plugin)，模式(mode)和浏览器兼容性(browser compatibility)。

核心概念：

输入(entry)配置方法：

单个入口：

标准写法：

在webpack.config.js文件中配置

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

简写：

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

多个入口/对象写法：

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

输出(output)配置方法：

在webpack.config.js文件中配置

基础写法：

module.exports = {
  output: {
    filename: 'bundle.js',
  }
};

多个入口起点：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

// 写入到硬盘：./dist/app.js, ./dist/search.js

模式(mode)配置方法：

module.exports = {
  mode: 'development/production/none'
};

development:开发版

production：生产版

none：退出任何默认优化选项

加载程序(loader)配置方法：

**简介：**loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

1、安装

npm install --save-dev css-loader   //加载 CSS 文件
npm install --save-dev ts-loader   //将 TypeScript 转为 JavaScript

2、在webpack.config.js配置

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

插件(plugin)配置方法：

用于解决 loader 无法实现的其他事。

在webpack.config.js中配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};