webpack学习

webpack的安装

 npm install webpack -g

Webpack文件打包配置:

1.执行npm init 命令后,会自动导入Node需要的依赖包;

-1.1生成对应大文件

package.json

{
  "name": "vuewebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wangwei"
}
//生成了package.json即可借助于path获取当前项目所在的绝对路径

2.Webpack入口文件和出口文件的配资

webpage.config.js

const path = require('path')  //导入node的全局变量path
module.exports={
  entry:'./src/main.js'.
  output:{
    path:path.resolve(__dirname,'dist') //当前项目所在的绝对路径
    filename:'bundle.js'
}.
}

3.配置定义 npm run build 命令

在控制台输入执行命令 npm run xxx 的时候,node会到“package.json”文件中的脚本“scripts”中查找对应的脚本,如 “test” 即:npm run test

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

如果要执行npm run build,需要在webpage.config.js中增加脚本:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     “build”:"webpack"
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 全局安装webpack 全局安装webpack会有个问题,就是当你有两个项目依赖于不同版本的webpack,就会有...
    説好的妹紙呢阅读 1,858评论 0 11
  • Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成...
    EarthChen阅读 412评论 0 1
  • 本文主要分为:环境配置使用配置文件CSS 处理ES6 代码编辑文件压缩SASS 处理CSS 与 JS 分离文件处理...
    _月光临海阅读 516评论 0 1
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 995评论 0 0
  • 这两周一直想写webpack的知识点,却发现webpack其实要将webpack说的具体内容还是挺多的。而且稀土掘...
    VioletJack阅读 21,047评论 1 69