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

webpack安装配置

时间:2017-11-24 22:45:44      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:doc   head   nbsp   配置   配置文件   字符串   目的   path   pac   

webpack安装

1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js

2.全局安装webpack,打开cmd输入npm install webpack -g

3.cmd cd进入当前目录,输入npm init命令,一直按Enter,然后在当前文件夹会出现package.json文件

当前目录为webpackTest

技术分享图片

webpack就安装成功了

webpack的配置

1.创建项目文件夹,文件夹的名字,不要叫“webpack”,并且不要包含大写字母,路径名不要包含中文

技术分享图片

2.在当前目录下新建webpack.config.js配置文件,名字一定要是这个,不然会出错。因为这是webpack默认执行的文件

当前文件还有如下文件

技术分享图片

out文件夹:存放出口文件

技术分享图片

src文件夹

技术分享图片

3.webpack.config.js配置文件的参数. 

    • entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
    • output:对应输出项配置 
      • path :入口文件最终要输出到哪里,
      • filename:输出文件的名称
      • publicPath:公共资源路径

 4.在src文件夹下的js文件夹下创建入口文件,我创建的是名为entry的js文件,在项目的根目录下新建index.html文件来试调使用;

webpack.config.js

module.exports = {
    entry : ./src/js/entry.js,//入口文件
    output : {//输出文件
        filename : index.js,//输出文件名
        path : __dirname + /out//输出文件路径
    },
}

 

 entery.js

console.log(webpack);

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>ss</title>
</head>
<body>
111
    <script src="./out/index.js"></script>
    <!-- 注意在这里引入的是打包完成的js文件 -->
</body>
</html>


 cmd cd 进入当前项目的根目录,即webpackTest文件夹下;输入webpack或者webpack-w命令,查看html文件是否能console.log出"webpack"字符串

 webpack和webpack-w的区别

webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)

 

webpack安装配置

标签:doc   head   nbsp   配置   配置文件   字符串   目的   path   pac   

原文地址:http://www.cnblogs.com/15fj/p/7892387.html

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