webpack的四大核心概念

Posted Blog - Liang Fengbo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack的四大核心概念相关的知识,希望对你有一定的参考价值。

webpack中文文档:https://doc.webpack-china.org/concepts/

一、Entry(入口)

1、单个入口(简写)语法
// 语法
entry: string|Array<string>

// 用法
module.exports = {
  entry: ‘./index.js‘
}

module.exports = {
  entry: [‘./index.js‘, ‘app.js‘]
}
2、多个入口(对象语法)
// 语法
entry: {[entryChunkName: string]: string|Array<string>}

// 用法
module.exports = {
  entry: {
    index: [‘./index.js‘, ‘./app.js‘],
    vendor: ‘./vendor.js‘
  }
}
3、多页面应用程
webpack 需要 3 个独立分离的依赖图
const config = {
  entry: {
    pageOne: ‘./src/pageOne/index.js‘,
    pageTwo: ‘./src/pageTwo/index.js‘,
    pageThree: ‘./src/pageThree/index.js‘
  }
};

一、output(输出)

1、用法

// 语法
filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。

const config = {
  output: {
    filename: ‘bundle.js‘,
    path: ‘/home/proj/public/assets‘
  }
};

module.exports = config;
2、多个入口起点
{
  entry: {
    app: ‘./src/app.js‘,
    search: ‘./src/search.js‘
  },
  output: {
    filename: ‘[name].js‘,
    path: __dirname + ‘/dist‘
  }
}

// 写入到硬盘:./dist/app.js, ./dist/search.js
3、使用 CDN 和资源 hash
output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

三、loader(用于对模块的源代码进行转换)

1.webpack 加载 CSS 文件,或者将 TypeScript 转为 javascript。为此,首先安装相对应的 loader:
npm install --save-dev css-loader
npm install --save-dev ts-loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ‘css-loader‘ },
      { test: /\.ts$/, use: ‘ts-loader‘ }
    ]
  }
};
2、module.rules 允许你在 webpack 配置中指定多个 loader
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: ‘style-loader‘ },
          {
            loader: ‘css-loader‘,
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

四、plugins(插件)

1、特点
1.参加打包整个过程
2.打包优化和压缩
3.配置编译时的变量
4.极其灵活
2.用法
// 在打包过程中会使用UglifyJsPlugin这个插件来对代码进行一些压缩整理等
const webpack = require(‘webpack‘);
module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}

提取相同的代码
CommonsChunkPlugin

混淆,压缩代码的
UglifyjsWebpackPlugin

功能相关
ExtractTextWebpackPlugin
htmlWebpackPlugin
HotModuleReplacementPlugin
CopyWbpackPlugin

五、思维图

技术分享图片

以上是关于webpack的四大核心概念的主要内容,如果未能解决你的问题,请参考以下文章

四大维度解锁Webpack3.0工具全技能视频 Webpack教程

四大维度解锁Webpack3.0工具全技能视频 Webpack教程

Webpack核心概念

Webpack底层原理及核心概念实际应用(一篇封神系列)

Webpack核心概念

webpack-webpack核心概念(loader打包静态资源plugssourceMapdevServerHMRbabel)