webpack-1-入门

推荐去看看官网教程：webpack官网

1 hello webpack

学习没个新知识都会先来个hello world，学习webpack前来个hello webpack热热身
创建目录，初始化npm，本地安装webpack，本地安装webpack-cli（用于在命令行上运行webpack的工具）

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

项目结构：

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

index.html

index.js

function component() {
    const element = document.createElement('div');
    element.innerHTML = "Hello webpack";
    return element;
}
document.body.appendChild(component());

运行 npx webpack后，浏览器打开index.html，如果现实hello webpack就表示成功了。

2 使用配置文件

在根目录下（与dist、src同级）添加webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.js',  // entry可以是个字符串，也可以是个对象
    output: {
        filename: "main.js",  // dist里面那个js的名字就是从这来的
        path: path.resolve(__dirname,'dist')  // 这个就是编译后生成的js所做的文件夹
    }
}

3 npm 脚本

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main2": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

添加了 “build”: “webpack” 后就可以使用 npm run build来代替 npx webpack 了