webpack

http://webpackdoc.com/usage.html

npm install webpack -g
npm init -y
npm install webpack --save-dev

新建入口文件entry.js
打包入口文件webpack entry.js xxx.js

举例说明:导出/入其他的模块 module.exports、require、

webpack默认只会处理js,如果使用它处理其它的文件比如html css json等等,需要安装对应的loader,loader就是转换器,他可以把资源从一种形式,转换成另一种形式,最终得到的还是js文件。

处理css文件npm install css-loader style-loader --save-dev
引入css文件 require('style-loader!css-loader!./css.css');

webpack的配置文件是webpack.config.js

module.exports={
    entry:'./entry.js',
    output:{
        path:__dirname,
        filename:'build.js'
    },
    module:{
        loaders:[
            {test:/\.css/,loader:'style-loader!css-loader'}
        ]
    }
};

生成开发用的服务器,在文件变化的时候自动打包,刷新页面
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev //把依赖写入package.json
webpack-dev-server --inline --hot自动刷新页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,231评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,226评论 7 35
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,496评论 2 71
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 3,176评论 2 16
  • 刚刚过去的十一假期,发生了一件令人着恼的事情,家被盗了!情况如下: 爱人去北京进修,因为难得的假期,所以带着孩子去...
    张益达_snake君阅读 376评论 0 1