技术联盟

webpack 简单使用

webpack 简单使用

webpack是目前前端开发最流行的打包工具之一,今天就一步一步构建

初始化npm工程

npm init 创建npm 工程 根据自己的需求进行配置项目

添加webpack 依赖

npm i webpack –save-dev

安装webpack

安装成功之后,在package.json中在 devDependencies中有 webpack

使用webpack打包 js

创建js文件

  1. 创建module.js
  2. 创建app.js

module.js 文件内容

export const log = function(){

​ // document.write('module.js loaded');

​ console.log('module.js loaded');

}

app.js

import moduleLog from './module.js';

import './style.css';

moduleLog();

document.write('app.js loaded');

  1. 创建index.html

<!DOCTYPE html>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

webpack测试