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

相关文章

  • 初识webpack4.x(一)

    系列文章 初识webpack(一) 初识webpack(二)之常用插件配置 初始webpack(三)之环境分离终结...

  • webpack 初识

    1.Webpack是什么,它有什么作用 把你的项目当做一个整体,通过一个给定的主文件(如:index.js),We...

  • 初识Webpack

    标签(空格分隔): 前端 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依...

  • 初识 webpack

    1. 初始化项目 首先,让我们用命令行创建一个名为 webapp 的项目文件夹,初始化 npm,本地安装 webp...

  • webpack初识

    webpack-demo Git Repowebpack-API Concepts 概念 At its core,...

  • 初识webpack

    今天有空,刚好学习了一点webpack相关的知识,在这里整理一番。 下面会给上我的GitHub,里面有6个小dem...

  • webpack 初识

    webpack 构建流程 初始化参数,从配置文件和 shell 语句中读到的参数合并,得到最后的参数 开始编译:用...

  • webpack初识

    1. webpack是什么? webpack是一个模块化开发的打包工具,基于nodejs开发的 2. webpac...

  • webpack初识

    首先我们通过一个简单的例子,让webpack去解析es module html index.js header.j...

  • 初识webpack

    1 webpack是什么? Webpack是一个开源的JavaScript模块打包工具,其最核心的功能是解决模块之...

网友评论

    本文标题:初识webpack

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