您的位置：首页 > Web前端 > Webpack

接上一个webpack资源整合。我觉得这样更清晰

2017-10-03 12:58 316 查看

这是参照上一个转载教程总结的。很清晰。当然关于webpack的server和插件部分，没有再次整合。这个教程适合菜鸟，即对webpack一点也不懂的。大神就略过，

1.下载.msi格式node.js的安装文件，并且安装好

2.cmd命令：npm install webpack -g 全局安装webpack

3.转到项目文件夹下。运行npm init 创建package.json说明文件，测试时直接回车即可

4.到这里webpack就安装完成了

5.配置：在项目根目录下创建webpack.config.js文件

module.exports = {

entry : ‘./src/js/entry.js’,//入口文件

output : {//输出文件

filename : ‘index.js’,//输出文件名

path : __dirname + ‘/out’//输出文件路径

},

}

6.在项目根目录下创建src文件夹包含css文件夹，js文件夹，less文件夹，img文件夹

在js文件夹下创建entry.js文件

测试时内容随便写console.log（”123”）;

7.在项目根目录下创建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>

8.在cmd命令行输入：

webpack -w

或者

webpack

运行程序，打开index.html看是否console成功。

webpack 和 webpack -w 区别

webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包,

但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作

ctrl+c)

1.加载loader

npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader
b89e
less –save-dev 为了方便先将常用的loader使用npm命令先加载进来。

2.修改webpack.config.js文件，将加载器引入

3.测试css：在css文件夹下创建index.css，随便写点属性

4.因为在webpack里面一切皆是模块。所以需要将css引入。所以在entry.js里面加上这一句代码：

require(‘../css/index.css’);

5.使用命令webpack -w 查看效果。

多个js文件如何加载

1.创建tool.js文件

var tool = {//获取DOM元素

getDom: function(className) {

return document.getElementsByClassName(className)[0];

}

}

module.exports = tool;//模块出口

2.创建demo1.js文件和demo2.js文件

var obj = require(‘./tool.js’);

var demo1 = {

init: function() {

this.bindEvent();

},

bindEvent: function() {

//var demo1 = document.getElementsByClassName(‘demo1’)[0];

var demo1 = obj.getDom(‘demo1’);

demo1.onclick = this.changeStyle;

},

changeStyle: function() {

this.style.width = ‘200px’;

this.style.height = ‘200px’;

this.style.background = ‘green’;

console.log(‘1’);

}

}

module.exports = demo1

demo1文件和demo2文件是同理的。

3.修改入口文件entry.js

require(‘../css/index.css’);

var demo1 = require(‘../js/demo1.js’);

var demo2 = require(‘../js/demo2.js’);

demo1.init();
demo2.init();

4.查看效果。使用的webpack -w。就直接在页面上面点击demo1.demo2.测试就行。

js的打包教程到这里就结束了。

下面看图片的打包的教程，

1.在img文件夹下面放个图片进去，修改entry.js文件

require(‘../css/index.css’);

var demo1 = require(‘../js/demo1.js’);

var demo2 = require(‘../js/demo2.js’);

demo1.init();
demo2.init();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航