webpack 入门

webpack

发布日期: 2019-02-25

一、安装

前提：安装Node.js最新版。

1.1本地安装

i.安装最新版本
npm install --save-dev webpack
ii.安装指定版本的webpack
npm install --save-dev webpack@<version>
iii.安装CLI（4.+版本需要）
npm install --save-dev webpack-cli

二、基本的构建过程

i.创建一个目录
mkdir webpack-demo&&cd webpack-demo

ii.初始化npm
npm init -y

iii.安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev

iv.创建目录结构、文件和内容

/src “源”代码—— 用于书写和编辑代码
/dist “分发”代码—— 构建构成产生的代码最小化和优化后的“输出”目录，最终将在浏览器加载。
webpack.config.js 配置文件。
package.json 设置一些脚本

v.执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js。

1.简单的目录结构

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

2.”index.js” 中打包 ‘lodash’ 依赖

我们需要在本地安装 library；

i.安装一个用于生产环境的安装包lodash

npm install --save lodash

ii.安装一个用于开发环境的安装包lodash

npm install --save-dev lodash

3.”webpack.config.js”

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

4.”package.json”

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
   "private": true,
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

5.”index.js”

  import _ from 'lodash';
  function component() {
    var element = document.createElement('div');

   // Lodash, now imported by this script 
    element.innerHTML = _.joi(['Hello','webpack'],'');
    return element;
  }

  document.body.appendChild(component());

6.”/dist/index.html”

 <!doctype html>
  <html>
   <head>
     <title>起步</title>
   </head>
   <body>
     <script src="main.js"></script>
   </body>
  </html>

三、概念

3.1 入口（entry）

入口起点(entry point) 指示webpack使用哪个模块来作为构建内部 依赖图 的开始。
通过 webpack.config.js 中配置 entry 属性，来指定一个入口或者多个入口起点。

“webpack.config.js” 单个入口

module.exports = {
  entry: './path/to/my/entry/file.js'
};

“webpack.config.js”多个入口

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

3.2 出口(output)

output 属性告诉webpack在哪里输出所创建的 bundle，以及如何命名这些文件（默认 ./dist）

“webpack.config.js” 输出

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

3.3 loader

loader 让wepack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。
loader 可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用打包能力去处理。
webpack的配置中loader有两个目标：

1.test属性，用于标识出应该被对应的loader进行转换的某个或某些文件；

2.use属性，表示进行转换时，应该使用哪个loader；

i.先安装“raw-loader”

npm install --save-dev raw-loader

ii.添加

“webpack.config.js”

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

3.4 插件（plugins）

插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量。
如何使用：
1.安装插件npm install --save-dev html-webpack-plugin;

2.调整“webpack.config.js”.

“webpack.config.js”

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

四、优化开发环境

4.1 source map

用途：为了更容易的追踪错误和警告；
将编译后的代码映射回原始源代码；

“webpack.config.js”

  module.exports = {
    entry: {app: './src/index.js',},
    devtool: 'inline-source-map',
};

五、packag.json文件配置

5.1 开发工具

帮助你在代码发生变化后自动编译代码

5.1.1 watch

优点：自动重新编译修改后的模块；
缺点：需要手动刷新浏览器；
命令行：npm run watch。

使用方法：
i.添加npm script

"watch": "webpack --watch"

5.1.2 server

优点：实时重新加载（live reloading）；
命令行：npm start
常用配置参数

1.--open 自动打开浏览器；

2.--hot 热更新，不在刷新的情况下替换css样式；

3.--inline 自动刷新；

4.--port 9999 指定端口；

5.--process 显示编译进度；

使用方法：
i.安装“webpack-dev-server”

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

ii.修改配置文件，告诉开发服务器(dev server)，在哪里找文件。

“webpack.config.js”

devServer: {
      contentBase: './dist'
},

iii.添加script脚本

 "start": "webpack-dev-server --open --hot --inline"

5.1.3 middleware

稍后更新……

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
      "start": "webpack-dev-server --open",
      "server": "node server.js",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "webpack-dev-middleware": "^1.12.0",
      "xml-loader": "^1.2.1"
    }
  }

六、插件

6.1 HtmlWebpackPlugin

解决生成的包被重命名在一个构建中，仍然会引用旧名字的问题；
自动生成 index.html
使用步骤：
1.安装插件npm install --save-dev html-webpack-plugin;

2.调整 webpack.config.js;

6.2 清理”/dist”文件夹

构建前清理 /dist 文件夹；
因此只会生成用到的文件；
使用步骤：
1.安装插件：npm install --save-dev clean-webpack-plugin;

2.调整 webpack.config.js;

6.3 HtmlWebpackPlugin

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'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };