webpack打包工具
目的:平时小项目中例如一些网站需要进行打包压缩,用这个工具可以进行打包压缩,就可以上传到服务器。
使用方法:
1,引进需要打包的项目,把入口html替换掉项目中的index.html,把引进的js,css都放在src里面对应的文件夹里面
2,npm install
3,进行webpack.config.js文件的修改
1 var path = require("path"); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 var config = { 4 //入口文件 5 entry: { 6 index : './src/js/common.js' 7 }, 8 //出口文件 9 output: { 10 path: path.resolve(__dirname,"dist"), //编译后的文件路径 11 filename: 'js/app.js', 12 }, 13 module: { 14 //Loaders 15 rules: [ 16 //.css 文件使用 style-loader 和 css-loader 来处理 17 { 18 test: /\.css$/, 19 loader: 'style-loader!css-loader' 20 }, 21 //图片文件使用 url-loader 来处理,小于8kb的直接转为base64 22 { 23 test: /\.(png|jpg)$/, 24 loader: 'url-loader', 25 options:{ 26 limit:5000, 27 name:'image/[name].[hash:8].[ext]' 28 }, 29 }, 30 { 31 test: /\.html$/, 32 use:[ 33 { 34 loader:'html-withimg-loader' 35 }, 36 { 37 loader:'html-loader', 38 query:'require' 39 } 40 ] 41 } 42 ], 43 44 }, 45 plugins:[ 46 new HtmlWebpackPlugin({ 47 template:'./index.html', 48 filename:'index.html', 49 inject:"head" 50 }) 51 ] 52 }; 53 54 module.exports = config;
4,在入口文件引进(require)所需要打包的文件,如
1 'use strict'; 2 require('../css/style.css');
5,删除html的js和css引入路径,因为打包完成后的js会自动注入打包过的html,执行npm run start,进行打包。
6,把dist文件上传到服务器。
注意的问题:
因为webpack是按模块来打包的,也就是说经过打包的文件代码是被打包到一个函数里,此时你所有定义的变量或者方法已变成局部的。所以如果打包后需要引用该函数的话,记得把函数定义在全局,用window.fun = function(){}或者把函数写在module.exports={}里面。
工具现状:
可以打包js文件、css文件、image、html,后续会继续完善该工具。
git地址: