Webpack

webpack is a bundle system and it is run on nodejs

作者：山茶树和葡萄树
链接：https://www.zhihu.com/question/37694275/answer/113609266
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

叫什么不重要，重要的是你要知道它能做什么。

大致说一下，（如有误望指正）：

- node , 是javascript语言的环境和平台，
- npm , yarn , bower 是一类，包管理，
- webpack , browserify , rollup 是一类，javascript**模块打包** 方案(方案+工具+插件)，
- babel, TypeScript, 算是一类，ES编译器，
- requirejs , seajs 是一类, 以前基于 commonjs，amd，cmd，umd 之类的模块类包**加载** 方案的框架，
- grunt , gulp , 前端工具，结合插件，合并、压缩、编译 sass/less，browser 自动载入资源，
- react , angular , vue , backbone 是一类，mvc , mvvm , mvp 之类的前端框架，
- jquery , zepto , prototype 是一类，前端 DOM , BOM 类库 ，
- ext , yui , kissy , dojo 是一类，前端应用组件，以前大而全的解决方案，
- rxjs , lodash , underscore , ramda , immutable , moment , mathjs 是一类，JavaScript Utility Libraries，
- JSLint , JSHint , JSCS , ESLint , 是一类，代码检验，
- Ionic , NativeScript , React Native , Flutter , PhoneGap/Cordova , Xamarin 算是一类，Cross-Platform 开发工具，
- Less , Sa|css , Stylus , PostCSS , 是一类，CSS 程式化方案，
- Karma , Protractor , 测试

然后，找喜欢的上。

boilerplate

https://github.com/cvgellhorn/webpack-boilerplate

Quick Start

npm init

npm install webpack webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env --save-dev

package.json file will be generated

need to create the webpack.config.js (old version)

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

new version 4

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
};

create index.js

console.log("hello world")

add build to package.json

 "build": "webpack"

and then npm run build to generate the index.bundle.js

https://github.com/quantificial/demo-webpack.git

Resources

introduction

https://medium.com/@Mike_Cheng1208/%E4%BB%80%E9%BA%BC%E6%98%AFwebpack-%E4%BD%A0%E9%9C%80%E8%A6%81webpack%E5%97%8E-2d8f9658241d

Basic Tutorial

https://www.valentinog.com/blog/webpack-tutorial/#webpack_4_the_HTML_webpack_plugin

https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/