webpack入门之打包初体验

前期准备

1.在src目录下面建立a.js,b.js,c.js模块，代码如下所示

export default function a(){
    console.log('modult a');
}

2.在src目录下面建立app.js，导入之前建立好的模块a,b,c。代码如下所示，

import a from './a.js';
import b from './b.js';
import c from './c.js';
a();
b();
c();

3.在src同级目录下建立index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="./app.js"></script></body>
</html>

4.执行会报错

原因是浏览器不识别es6模块导入语法，所已用webpack打包编译一下生成一个可以被浏览器识别的文件

 

1.安装node.js

　　http://www.runoob.com/nodejs/nodejs-install-setup.html

2.把npm镜像仓库地址更改为淘宝的cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3.cnmp软件管理工具初始化

cnpm init -y

   生成如下图所示package.json文件(里面记录了通过cnpm下载的软件)

内容如下所示

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  }

 

4.安装webpack

cnpm i -D webpack

5.在src同级目录下建立webpack,config.js文件

const path = require('path');
module.exports={//node.js语法导出一个对象
    //输入的文件，相对路径
    entry:'./src/app.js',
    //输出的文件，
    output:{
        path:path.resolve(__dirname,'dist'),//绝对路径
        filename:'main.js',
    },

}

6.执行

cnpm run dev

　　

7.在dist目录下新建index.html文件引入main.js

8.预览index.html

 

posted on 2018-01-15 17:42  running-fly  阅读(149)  评论(0)    收藏  举报

导航