WEBPACK简介

Posted 2020-08-20 苏荷酒吧

Webpack 是一个强力的模块打包器。 所谓 包 (bundle) 就是一个 javascript 文件，它把一堆 资源 (assets) 合并在一起，以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript 、 CSS 样式、 html 以及很多其它类型的文件。

1、安装

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

我们通过一个 JavaScript 配置文件 webpack.config.js 来决定 Webpack 做什么以及如何做。

2、入口与输出

entry: {
  app: ‘src/app.ts‘
}

Webpack 探查那个文件，并且递归遍历它的 import 依赖。

output: {
  filename: ‘app.js‘
}

这个 app.js 输出包是个单一的 JavaScript 文件，它包含程序的源码及其所有依赖。 后面我们将在 index.html 中用 <script> 标签来加载它。

3、多重包

entry: {
  app: ‘src/app.ts‘,
  vendor: ‘src/vendor.ts‘
},

output: {
  filename: ‘[name].js‘
}

在输出文件名中出现的 [name] 是一个 Webpack 的 占位符 ，它将被替换为入口点的名字，分别是 app 和 vendor 

4、加载器

loaders: [
  {
    test: /\.ts$/
    loaders: ‘ts‘
  },
  {
    test: /\.css$/
    loaders: ‘style!css‘
  }
]

当 Webpack 遇到像这样的 import 语句时……

import { AppComponent } from ‘./app.component.ts‘;
import ‘uiframework/dist/uiframework.css‘;

它会使用 test 后面的正则表达式进行模式匹配。　　

5、插件

plugins: [
  new webpack.optimize.UglifyJsPlugin()
]

我们已经了解webpack的基本配置了，那么我们开始

6、完整配置

module.exports =  {
        entry: ‘./index.js‘,
        devtool: ‘source-map‘,
        output: {
            filename: ‘[name].js‘
        },
        resolve: {
            alias:{ jquery: ‘src/lib/jquery.js‘, }
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: ‘jquery‘,
                _: ‘underscore‘,
                React: ‘react‘
            }),
            new WebpackNotifierPlugin()
        ],
        module: {
            loaders: [{
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: ‘babel-loader‘
            },  {
                test: /\.less$/,
                loaders:[‘style-loader‘, ‘css-loader‘,‘less-loader‘]
            }, {
                test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }, {
                test: /\.html/,
                loader: "html-loader?" + JSON.stringify({minimize: false })
            } ]
        }
    };