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自动刷新页面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Require.js

    通过require.js 可以对javascript文件进行别样引用 Require.js的使用: 第一步: 只需在html页面中引用require.js ...

    河湾欢儿
  • gulp

    简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得配置node环境

    河湾欢儿
  • 启动项目时有node-sass的错误

    然后就出现了一堆错误 解决方案首先就是使用cnpm或者yarn来安装 我这里用的yarn 然后下载依赖 结果发现还是报错 找了半天才想起来这是一年前的...

    河湾欢儿
  • Webpack2入门

    kongxx
  • 原 webpack 简单安装步骤和配置

    作者:汪娇娇 时间:2017年8月11日 1、安装webpack (1)全局:npm install -g webpack (2)项目文件夹(cmd跳转到项目的...

    jojo
  • webpack(4.8.3)总结之一

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • webpack(4.8.3)总结

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • (9/24) 图片跳坑大战--css分离与图片路径处理

    在上一节当中,我们把小图片打包成Base64格式(打包到了js当中)。我们也算是对webpack对图片的打包有个基本了解。

    wfaceboss
  • Webpack(一):安装和基础配置

    之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v 命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记...

    Chor
  • 从0开始发布一个无依赖、高质量的npm

    没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西。甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应...

    用户2356368

扫码关注云+社区

领取腾讯云代金券