初识webpack

作者: zhangjingbibibi | 来源:发表于2017-07-09 15:46 被阅读54次

    今天有空,刚好学习了一点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

    相关文章

      网友评论

        本文标题:初识webpack

        本文链接:https://www.haomeiwen.com/subject/scashxtx.html