Webpack学习笔记 - 提升篇

最新推荐文章于 2024-08-13 15:16:56 发布

weixin_34061482

最新推荐文章于 2024-08-13 15:16:56 发布

阅读量74

点赞数

文章标签： webpack ViewUI

原文链接：https://my.oschina.net/myshow/blog/813884

版权

为什么80%的码农都做不了架构师？>>>

如果你已经读了 Webpack学习笔记 - 入门篇，是不是觉得已经可以用 Webpack 做些事情了。

是的，但是总觉的少了些么。馅里不只有肉，还有香菇。

开始使用Webpack

安装 html-webpack-plugin 插件

 npm install html-webpack-plugin --save-dev

修改 index.html 文件

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <title>Webpack Sample Project</title>
 </head>
 <body>
     <div id='hello'></div>
 </body>
 </html>

修改 webpack 配置文件 webpack.config.js

 var HtmlWebpackPlugin = require("html-webpack-plugin");

 module.exports = {
     entry: "./src/index.js",  //入口文件
     output: {
         path: "./dist/",           //打包输出目录
         filename: "js/index.js",    //打包文件名
         publicPath: "./"     //资源发布路径
     },
     module: {
         loaders: [
         {
             test: /\.css$/, //处理样式文件
             loaders: ['style', 'css']
         },
         {
             test: /\.json$/,  //处理json文件
             loader: 'json' 
         },
         {
             test: /.*\.(gif|png|jpe?g|svg)$/i, //处理图片
             loaders: [
             'url?limit=8192&name=img/[name].[ext]',
             'image-webpack?{optimizationLevel: 7, interlaced: false, pngquant: { quality: "65-90", speed: 4},  mozjpeg: { quality: 65 }}'
             ]
         } 
         ]
     },
     plugins: [
         new HtmlWebpackPlugin({
             filename: 'index.html', 
             template: './index.html',
             inject: true 
         })
     ]
 }

项目根目录下执行 webpack 指令，输出结束如下

 Hash: fc21ebafad12332c7fd1
 Version: webpack 1.14.0
 Time: 7015ms
         Asset       Size  Chunks             Chunk Names
 img/webpack.png      40 kB          [emitted]
     js/index.js     291 kB       0  [emitted]  main
     index.html  243 bytes          [emitted]
 [0] ./src/index.js 258 bytes {0} [built]
 [8] ./src/hello.js 180 bytes {0} [built]
     + 8 hidden modules
 Child html-webpack-plugin for "index.html":
         + 3 hidden modules

输出目录 dist 结构如下:

webpack-test-project
|--dist
|  |--index.html
|  |--js
|  |  |--index.js
|  |--img
	|  |  |--webpack.png

文件 dist/index.html 由 html-webpack-plugin插件以 index.html 为模板自动生成:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <title>Webpack Sample Project</title>
 </head>
 <body>
     <div id='hello'></div>
     <script type="text/javascript" src="./js/index.js"></script>
 </body>
 </html>