初识webpack
2017-07-09 本文已影响54人
zhangjingbibibi
今天有空,刚好学习了一点webpack相关的知识,在这里整理一番。
下面会给上我的GitHub,里面有6个小demo,分别是
1.hello webpack
2.多入口文件
3.使用Webpack CSS loader加载器
4.使用webpack Image loader 加载图片
5.使用uglify-js 压缩打包JS代码
这里可以不用npm进行uglify-js插件的安装,直接下面这样写
varwebpack=require('webpack');
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'bundle.js'
},
plugins:[
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
};
6.使用webpack构建本地服务器
因为前5个demo都是用的live-server充当本地服务器,最后一个是用的常用的webpack-dev-server来搭建服务器
最后贴上webpack的几个npm安装
/*全局安装*/
npm install webpack -g
/*liver-server充当服务器*/
npm intall liver-server -g
/*init*/
npm init
/*cssloader*/
npm install css-loader --save-dev
npm install style-loader --save-dev
/*img loader*/
cnpm install url-loader --save-dev
cpnm install file-loader --save-dev
/*webpack搭建服务器*/
npm install webpack-dev-server --save-dev
这是GitHub地址:https://github.com/zhangjing9898/webpack.git