webpack初体验

创建文件夹

mkdir webpack-demo
cd webpack-demo

初始化

npm init -y  // 初始化

安装webpack webpack-cli

npm install webpack webpack-cli -D

创建webpack.config.js文件

//配置入口文件和出口文件
const {resolve} = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development'  // 开发模式不会压缩代码，方便查看
};

package.json配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  //打包npm run build
  },

// src/index.js
function add(x, y) {
  return x + y
}

console.log(add(5, 5));
import data from './data.json'

console.log(data);

执行npm run build 打包

在dist目录下index.html引入main.js

运行index.html

// 10  
// {name: "jack", age: 12}
// 可以加载js文件和json文件