AitSchool

webpack

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

学习建议

文档文档文档，所以的一切根源都来自于文档。

  1. 文档永远是首选资源。国外技术文档大多英文为主，国内翻译者会把文档翻译成中文文档。可以通过中文文档入门，再通过英文文档看是翻译是否有语意错误或者遗漏的地方。

  2. 开发者笔记。可以在简书、知乎搜多相关开发者的笔记，笔记是开发者看文档后的小结，有一定意义的借鉴作用，但要注意版本问题。

  3. 开发问题。可以在其 Github 、stackoverflow 或者 思否，查询开发者在使用这个工具、插件、库时候遇到的问题。

  4. 视频辅助。查看录制视频。

  5. 请教身边的小伙伴。

  6. 参照 DEMO 体验完成。

学习建议

  1. 查看官网文档 - 概念，了解 webpack 及其相关方法概念，分清楚 入口、输出、loader、插件的概念。
  2. 查看官网文档 - 指南，一步步体验。
  3. 查看官网文档 - loader, 搜索出 less-loader，对 less 文件进行打包编译尝试。
  4. 登录 Babel 官网查看，点击文档中配置 ,在选择你的工具中构建系统选择 Webpack 然后按指示配置，对 ES6 进行打包编译尝试。
  5. 体验以下DEMO，和使用了那些插件做了些什么，为什么要这么写。之后保证在不看 DEMO 的前提下也能配置出自己的 Webpack 打包配置方案，对 Less/Sass 及 ES6 进行转译处理。

如果通过文档的方式不能深入理解，请领取视频配合学习。

DEMO

通过一下例子，体验 webpack ，使用 ES6 import 、Less 、Vue 打包一个小模块。

  1. 全局安装 webpack
npm install webpack webpack-cli -g
  1. 创建项目文件夹并进入
cd ~/Desktop && mkdir webpack-init && cd webpack-init
  1. 初始化 package ，输入命令后一路回车。
npm init
  1. 下载各种依赖包，其中包括

  • webpack

  • webpack-cli

  • webpack-merge

  • clean-webpack-plugin

  • uglifyjs-webpack-plugin

  • ES6

    • babel-loader
    • @babel/core
    • @babel/preset-env

  • file

    • url-loader
    • file-loader

  • Less

    • style-loader
    • css-loader
    • less-loader
    • less

  • Vue

    • vue
    • vue-loader
    • vue-template-compiler
npm install webpack webpack-cli webpack-merge clean-webpack-plugin uglifyjs-webpack-plugin @babel/core babel-loader @babel/preset-env url-loader file-loader style-loader css-loader less-loader less vue vue-loader vue-template-compiler --save-dev
  1. 在根目录下创建 .babelrc 文件，并编辑
touch .babelrc

{
  "presets": ["@babel/preset-env"]
}
  1. 在根目录下创建 webpack.config.js 文件，并编辑
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: {
    app: './src/js/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(['dist']),
  ],
  module: {
    rules: [{
        test: /\.(css|less)$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'url-loader'
        ]
      },
      {
        test: /\.(ttf|eot|woff(2))(\?[a-z0-9]+)?$/,
        loader: 'file-loader',
      },
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      { test: /\.vue$/, loader: 'vue-loader' }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};
  1. 在根目录下创建 webpack.dev.js 文件，并编辑
const merge = require('webpack-merge');
const common = require('./webpack.config.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});
  1. 在根目录下创建 webpack.prod.js 文件，并编辑
const merge = require('webpack-merge');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.config.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({
        sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});
  1. 创建开发文件目录 src 并对里面结构进行编辑
|-webpack-init
|  ├ ...
|  ├ src
|  |  ├ js
|  |  |  ├ app.js
|  |  |  ├ app.vue
|  |  |  ├ print.js
|  |  ├ img
|  |  |  ├ avatar.png
|  |  ├ less
|  |  |  ├ app.less

添加图片 src/img/avatar.png

src/less/app.less

html {
  min-height: 100%;
  background: #f5f5f5;
}

src/js/print.js

const printMe = () => {
  console.log('I get called from print.js!');
}

export default printMe;

src/js/app.vue

<template>
  <div>
    <div class="example">{{ msg }}</div>
    <img :src="avatar_url">
  </div>
</template>

<script>
import Avatar from './../img/avatar.png';
export default {
  data () {
    return {
      msg: 'Hello world!',
      avatar_url: Avatar,
    }
  }
}
</script>

<style lang="less">
.example {
  color: red;
}
</style>

src/js/app.js

// Less
import './../less/app.less';

// ES6 
import printMe from './print.js';
printMe();

// Vue
import Vue from 'vue'
import App from './app.vue'
new Vue({
    el: '#app',
    render:h=>h(App)
})
  1. 在根目录中创建 index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>webpack-init</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="dist/app.bundle.js"></script>
</body>
</html>
  1. 配置 package 中 scripts
{
  ...,
  "scripts": {
    "start": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  ...
}
  1. 运行
npm start

  1. 观察dist目录，并打开 index.html 查看效果

  2. 参考代码

https://github.com/zhuayu/webpack4-init

←