webpack(2)-进阶

2018-06-10 18:26:54

总字数 961

预计阅读时间 4 分钟

开发工具

使用webpack-dev-server可以在本地启动一个服务 , 用来访问和调试构建出的页面
首先执行全局安装

1	$ npm install -g webpack-dev-server

使用方法
在项目目录下首先使用webpack --progress进行打包
webpack progress

然后使用webpack-dev-server --progress启动服务
webpack server

为了方便 , 我们也可以把这两个命令配置为npm的脚本
在package.json当中

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --progress",
    "start":"webpack-dev-server --progress"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0"
  }
}

之后执行npm run build和npm run start , 就相当于是直接执行这两个命令

加载器

上一节当中有用到了css加载器 , 将.css文件的内容直接嵌入到页面当中
还有很多第三方的加载器 , 可以给开发提供方便

资源文件加载器 file-loader

用于加载项目中用到的静态资源文件 , 例如图片字体等

1	$ npm install file-loader --save-dev

webpack.config.js

module.exports = {
  entry: {
    index : './src/entry.js'
  },
  output: {
    path: __dirname+"/dist",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
    { test: /\.css$/, loaders: ["style-loader","css-loader"] },
    //配置资源文件所对应的文件类型(正则)
    { test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot)$/, loader: "file-loader" }
    ]
  }
};

比如在css文件当中引用了一个图片文件

body {
  background-color: #ccc;
}
#testImg {
  width:200px;
  height:200px;
  background-image: url("../images/test.png");
}

执行打包之后就会根据图片的哈希码作为命名在输出目录下生成一个图片文件
image output

并且对应的css样式也会被替换
css output

图片加载器 url-loader

图片加载器是用于把项目中用到的图片转化为base64编码
( 这个编码在img元素的src 或者 css样式当中都是可用的 )

1	$ npm install url-loader --save-dev

同样使用上面的例子当中css样式里面对图片的引用
加载器的配置修改为

module: {
  loaders: [
  { test: /\.css$/, loaders: ["style-loader","css-loader"] },
  { test: /\.(png|jpg|gif)$/, loader: "url-loader" }
  ]
}

执行打包和发布运行后
base64 output

**补充 : **
在项目当中 , 我们通常把较小的图片文件转化为base64编码 , 较大的图片文件则直接保留原文件
避免js文件太过臃肿 , 加载缓慢
url-loader提供了一个limit参数 , 可以对图片的大小进行限制 ( 单位是字节 ) , 小于该值的由url-loader处理
大于这个值的 , 则直接交给file-loader处理

module.exports = {
//...(其他配置项)
  module: {
    loaders: [
    { test: /\.css$/, loaders: ["style-loader","css-loader","postcss-loader"]},
    { test: /\.(png|jpg|jpeg|gif)$/, loader: "url-loader" , query :{limit:20000,name:"[name]-[hash:8].[ext]",publicPath:"../images/",outputPath:"images/"}}, 
    //会将图片转化为base64编码直接写入到js文件当中
  //  { test: /\.(png|jpg|jpeg|gif|svg|eot)$/, loader: "file-loader", query :{name:"images/[name]-[hash:8].[ext]"}},
    { test: /\.(svg|eot)$/, loader: "file-loader", query :{name:"[name]-[hash:8].[ext]",publicPath:"../fonts/",outputPath:"fonts/"}},
//注意 : file-loader配置的文件类型匹配不要和url-loader冲突
  ]
  }
};

此时传递给url-loader的参数 , 如果资源文件被交给了file-loader来处理 , 这些参数也会传给file-loader
name就属于给file-loader去用的参数 , 代表打包以后文件的命名规则
打包后的结果如下

build result

其他常用的加载器还有

json处理 - json-loader
html处理 - raw-loader