webpack3学习1--开始

来源：互联网发布：好的名人传记推荐知乎编辑：程序博客网时间：2024/06/06 12:20

新建工程目录webpack-demo

mkdir webpack-demo && cd webpack-demonpm init -ycnpm install --save-dev webpackcnpm install --save lodash # JavaScript 工具库，备用

将要创建的最终工程目录如下：

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

创建webpack.config.js文件，添加如下内容

var path = require('path');module.exports = {  entry: './src/index.js',  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist')  }};

创建src目录，在src目录下新建index.js如下：

import _ from 'lodash';function component() {    var element = document.createElement('div');    element.innerHTML = _.join(['Hello', 'webpack'], ' ');    return element;}document.body.appendChild(component());

创建dist目录，在dist目录下新建index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Webpack Getting Started</title></head><body><script src="bundle.js"></script></body></html>

在 package.json 添加一个 npm 脚本(npm script)：

{  ...  "scripts": {    "build": "webpack"  },  ...}

在webpack-demo目录下运行

npm run build

会看到在dist目录下增加了一个bundle.js，这就是webpack输出的结果。最终工程目录如下：

|- /dist  |- bundle.js  |- index.html|- /node_modules|- /src  |- index.js|- package.json|- webpack.config.js

在webpack-demo目录下运行

http-server

浏览器访问http://localhost:8080/dist/，即可看到页面显示Hello webpack，如果没安装http-server，可以全局安装一个，安装命令如下

cnpm install http-server -g

现在，你已经实现了一个基本的构建过程，你应该深入了解基本概念和配置来更好地解 webpack 的设计。

本例子源代码地址：https://github.com/wu-boy/webpack-demo，demo1目录。

参考资料：
1.webpack中文网站
2.Webpack2 完整踩坑教程

阅读全文

0 0