码迷,mamicode.com
首页 > Web开发 > 详细

webpack安装教程及实例

时间:2017-08-03 11:17:58      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:script   set   title   控制台   put   conf   config   entry   name   

在控制台输入:

npm install webpack -g

这是全局的安装,如果需要局部安装,在控制台cd 打开到指定目录,输入:

npm install webpack --save-dev

即可。

实例:

  1. 建立index.html文件
  2. 建立main.js文件
  3. 建立webpack.config.js文件

index.html

<html lang="en">
 
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
 
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
 
</html>

 

main.js

document.write("<h1>Hello World</h1>");

 

webpack.config.js

module.exports = {
    entry: "./main.js",//这是源文件
    output: {
        filename: ‘bundle.js‘ //这是生成的新文件
    }
};

 

三个文件创建好之后,我们需要把项目运行起来,使用live-server来运行项目。

在控制台直接输入:

npm install live-server -g

安装成功之后,在控制台cd打开到项目的根目录,然后在控制台先输入webpack命令,webpack就是执行打包指令,打包成功之后,

在控制台输入:

live-server

即可运行项目。

 

webpack安装教程及实例

标签:script   set   title   控制台   put   conf   config   entry   name   

原文地址:http://www.cnblogs.com/Mrrabbit/p/7278226.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!