webpack入门

2020-06-10 本文已影响0人 Zouch在路上

1.安装

新建一个文件夹如webpack-demo，使用npm init 命令可以自动创建这个package.json文件,这是一个标准的npm说明文件，里面包含许多信息，包括当前项目的依赖模块，自定义的脚本任务等等。

为了方便也可以使用 npm init -y

2. 安装webpack

2种选其中一个（推荐本地安装）
全局安装
npm install -g webpack
本地安装
npm install webpack webpack-cli --save-dev
-dev代表安装在开发环境
如果出现报错，可以直接选择安装具体的版本，比如npm install --save-dev webpack@3.8.1

3. 开始

现在我们的webpack-demo文件夹会有node_module这个文件和package.json文件。
我们在当前目录下新增index.html文件，src文件夹，并在src文件夹中增加index.js，得到下面这个文件目录
webpack-demo文件夹

 |- /node_module
 |- package.json
+ |- /dist
    |- index.html
+ |- /src
+   |- index.js

dist/index.html内容如下

<!doctype html>
<html>
<head>
    <title>起步</title>

</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

src/index.js 内容如下

 import _ from 'lodash';
 function component() {
   var element = document.createElement('div');
  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

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

4.把本地 src/index.js 打包成 dist/bundle.js

通过命令./node_modules/.bin/webpack 入口路径 打包路径
比如：./node_modules/.bin/webpack src/index.js dist/bundle.js

webpack 打包.jpg
那么问题来了，如果文件很多这样打包，命令行是不是显得特别繁琐。所以我们可以通过配置文件的方式来打包，把入口文件和打包路径写在webpack.config.js文件中.

5 webpack.config.js配置文件

在当前目录下新建一个webpack.config.js文件。
webpack.config.js文件内容

const path = require('path');

module.exports = {
  entry: './src/index.js',  //入口文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')  //打包后的地址
  }
};

6 NPM Script

虽然文件名这个比较问题解决了，但是.node_module/.bin/webpack其实写起来也很不方便，所以我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
打开package.json文件：

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack" //npm script 会自己去找node_module下面的webpack，所以可以简写为webpack
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

现在，可以使用 npm run build 命令进行打包了。
打包完成之后可以使用浏览器或者服务器，打开dist/index.html