webpack使用

1、安装

打开一个目录  

Cnpm install webpack --global

2、创建一个初始化文件 npm init

3、创建文件

Name.js

Var name=”gp02-webpack”;

Module.exports = name;

Entry.js

document.getElementById("app").textContent = "Hello";

4、创建一个html文件index.html,写一个id为app的div

引入bundle.js

5、执行打包命令 webpack entry.js bundle.js

6、打开浏览器查看页面

7、通过webpack引入css模块化

Cnpm install css-loader style-loader --save-dev

8、创建一个style.css

 

9、在entry.js中引入css

require("style!css!./style.css");

10、执行编译命令，打开网页查看，这个时候发现添加了一个灰色的背景

11、编写webpack配置文件，可以节省很多编译命令

创建一个webpack.config.js

Module.exports = {

entry:”./entry.js”,

output:{

path:__dirname,

filename:”bundle.js”

},

module:{

loaders:[

{test:/\.css$/,loader:”style!css”}

]

 

}

 

此时我们已经不需要再在entry.js中那样引入css了

require("./style.css");

命令行编译 输入webpack即可编译

 

12、调试代码，通过source-map调试

查看控制台sources

执行命令webpack --devtool source-map

 

在配置文件中配置直接生成source-map

添加devtool:”source-map”

 

13、webpack结合babel处理es2015(es6)

安装 cnpm install babel-loader babel-core babel-preset-es2015 --save-dev

在创建一个文件.babelrc的配置文件，是一个数组

{

“preset”:[“es2015”]

}

在配置文件中配置

添加一个{test:/\.js$/,loader:”babel”}

创建一个test.js,写一些标准的es6的语法

let name = “gp02-webpack”;

Es6导出方法

Export default name;

在entry.js中导入

Import name from “./name”;

Import “./style.css”

命令行执行命令webpack

14、服务热替换

Cnpm install webpack-dev-server --global

Cnpm install webpack-dev-server --save-dev

启动命令 webpack-dev-server --inline --hot

更改一下样式表，就可以看到实时效果了

15、如果css文件中包含北京图片，那么我们需要一个url-loader

添加配置文件

{   test:/\.(png|jpg)$/,loader:'url-loader?limit=10000'}//限制大小小于10k的

16、如果在你的项目中添加了字体文件，那么我们需要添加一个file-loader

添加配置文件

{test:/\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,loader:'file-loader?name=[name].[ext]'}

17、如果我们需要直接编译sass文件，添加两个模块node-sass和sass-loader

添加配置文件

{test: /\.scss$/, loader:"style!css!sass"},

18、如果需要添加less编译，那么我们使用less模块和less-loader模块，

添加配置

{test: /\.less$/, loader:"style!css!less"},

19、分离css单独打包

安装插件cnpm install extract-text-webpack-plugin --save-dev

20、如果要处理合并压缩css,js

安装extract-text-webpack-plugin模块

在webpack.config.js文件中引入该模块

var ExtractTextPlugin = require("extract-text-webpack-plugin");

var webpack = require("webpack");

添加配置

{test:/\.(css|less|scss)$/,loader:ExtractTextPlugin.extract("style-loader", "css-loader","less","less-loader","sass-loader","node-sass")},

注意，此时需要把上面写的那些处理css和less以及scss的配置注释掉

在配置文件中添加插件

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

  new ExtractTextPlugin("styles.css"),

],

这样就在输出目录下添加了一个styles.css的css文件和common.js的js文件

先引入common.js，再引入bundle.js

运行命令 webpack -p就可以进行压缩了