blog-web/source/_posts/前端杂烩/webpack(2)-进阶.md

title	date	tags	categories
webpack(2)-进阶	2018-6-10 18:26:54	webpack	前端杂烩

开发工具

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

$ npm install -g webpack-dev-server

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

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

为了方便 , 我们也可以把这两个命令配置为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

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

$ 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");
}

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

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

图片加载器 url-loader

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

$ npm install url-loader --save-dev

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

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

执行打包和发布运行后

---

**补充 : ** 在项目当中 , 我们通常把较小的图片文件转化为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去用的参数 , 代表打包以后文件的命名规则 打包后的结果如下

---

其他常用的加载器还有

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