webpack学习笔记

1.安装webpack

npm install webpack -g

2.进入项目目录，初始化

npm init

3.将webpack安装到项目依赖中

npm install webpack --save-dev

4.创建一个webpack.config.js配置文件

module.exports = {

　　// 需要编译的文件
　　entry:{
　　　　index1:'./src/index1.js',
　　　　index2:'./src/index2.js'
　　},

　　// 编译配置项
　　output:{

　　　　// 输出到哪个目录
　　　　path:'./dire',

　　　　// 文件名 [name]会根据entry的键名来取值
　　　　filename:'[name].js'
　　}
};

目录结构：

5.cmd中输入:webpack

结果会生成一个dire目录。

OK，完成。

我们看看里面生成的代码。

乱七八糟的，如果想去掉这些可以这样。

var webpack = require('webpack');

module.exports = {
　　entry:{
　　　　index1:'./src/index1.js',
　　　　index2:'./src/index2.js'
　　},
　　plugins:[
　　　　new webpack.optimize.UglifyJsPlugin()
　　],
　　output:{
　　　　path:'./dire',
　　　　filename:'[name].js'
　　}
};

好像没啥用对吧，我们可以这样。

 

webpack小试身手，模块化开发。

 

目录结构

module.exports = {
　　entry:'./main.js',
　　plugins:[
　　　　new webpack.optimize.UglifyJsPlugin()
　　],
　　output:{
　　　　path:'./dire',
　　　　filename:'main.js'
　　}
};

这里将main.js做为主模块，我们可以在main.js里面将需要用到的js文件通过require引入进来，达到模块化的需求，这个require的用法和nodejs一样。

当然你可以划分成多个模块，你只需要更改一下这个。

module.exports = {
　　entry:{

　　　　xx:'./xx/xx.js',

　　　　xx:'./xx/xx.js'

　　　　.......

　　},
　　plugins:[
　　　　new webpack.optimize.UglifyJsPlugin()
　　],
　　output:{
　　　　path:'./dire',
　　　　filename:'[name].js'
　　}
};

这样你就可以根据不同模块编写JS代码了。真不错。

 

但这都只是冰山一角，来看看webpack更强大的功能。

在main.js中导入css文件。

 

main:require('./src/index.css');

但是发现报错了，我们需要配置一下webpack.config.js

 

编译css

var webpack = require('webpack');

module.exports = {
　　entry:'./main.js',
　　plugins:[
　　　　new webpack.optimize.UglifyJsPlugin({
　　　　　　compress:{

　　　　　　　　//去除控制台错误
　　　　　　　　warnings:false
　　　　　　}
　　　　})
　　],
　　output:{
　　　　path:'./dire',
　　　　filename:'main.js'
　　},
　　module:{
　　　　loaders:[
　　　　　　{test:/\.css$/,loader:'style-loader!css-loader'}
　　　　]
　　}
};

还得安装一下

npm install style-loader css-loader --save-dev

 

在main.js里面使用less文件。

require('./src/index.css');

require('./src/less.less');

需要进行如下配置：

loaders:[
　　{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
　　{ test: /\.css$/, loader: 'style-loader!css-loader' }
]

还得安装style-loader，css-loader，less-loader

 

npm install style-loader css-loader less-loader --save-dev

 

我安装完，webpack编译less文件的时候发现报错了。原来是还得安装一下less.

npm install less --save-dev

来看一下页面的效果：

我们用require过来的css文件变成style样式。

 

除了这个，我们还可以用来处理图片，将图片转成base64

 

main.js

require('./src/index.css');

require('./src/less.less');

var img = document.createElement('img');
img.src = require('./src/baidu.png');

var box = document.getElementById('box');
box.appendChild(img);

webpack.config.js

　　

loaders:[
　　{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
　　{ test: /\.css$/, loader: 'style-loader!css-loader' },
　　{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]

　　

limit:表示图片小于多少就转成base64格式的图片。

使用前我们还得安装一下url-loader

npm install url-loader --save-dev

webpack

看看效果

生成base64位了噢。

 

在css，less中都是可以使用的噢。

 

less代码

ul{
　　li{
　　　　width:200px;
　　　　height:200px;
　　　　color:red;
　　　　font-size:18px;
　　　　background:url(./baidu.png) no-repeat;
　　}
}

webpack实在太棒了。

 

如果你想编译其他格式的文件使用方法都差不多，这里就不试了。

 

通过webpack --watch监听文件变化自动打包。