webpack

安装

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

不推荐全局安装

demo目录如下：

配置文件

手动创建一个配置文件——webpack.config.js
下面是我按照webpack官网文档学习的配置文件，包括一些简单的入口，出口设置，以及l简单的loader和插件的使用。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: "[name].bundle.js",  //name对应entry里的key
    path: path.resolve(__dirname, "dist")
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
              title: 'Output Management'
            })
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
    }
    ]
  }
};

src目录下index.js代码如下：

import _ from 'lodash'
import './style.less'
import Img from './dlam.jpg'
import printMe from './print'

function component() {
    let element = document.createElement('div');

    let btn = document.createElement('button')
  
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    //Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello')
    
    btn.innerHTML = 'Click me'
    btn.onclick = printMe

    element.appendChild(btn)

    let myImg = new Image()
    myImg.src = Img
    myImg.classList.add('img')
    element.appendChild(myImg)

    return element;
  }
  
  document.body.appendChild(component());

  console.log("hello world")

  let array1 = [1,2,3]
  let array2 = array1.map((n) => n+1)
  console.log(array2)

loader

style-loader,css-loader,less-loader(sass-loader)

npm install --save-dev style-loader css-loader less-loader

使用这三个loader可以将我们写的less代码最终转换成待发布index.html中的style标签。这三个环环相扣，缺一不可。

babel-loader

将ES6语法转译为浏览器可以识别的语法

插件

html-webpack-plugin

npm install --save-dev html-webpack-plugin

HtmlWebpackPlugin会默认帮我们生成新的index.html文件

clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

每次构建前，清理/dist文件夹

使用开发服务器

我们一般使用webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading).

npm install --save-dev webpack-dev-server