webpack学习webpackWeb前端之路

初识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

上一篇下一篇

猜你喜欢

热点阅读