webpack学习笔记

淘宝镜像npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

开始项目结构

Paste_Image.png

创建项目文件命名为demo
2.在demo文件夹中创建src和dist文件夹
3.在src文件夹中创建app.js、cats.js,内容和对应的上面的app.js、cats.js内容一样。
4.用以下命令初始化项目,创建package.json配置文件。
npm init
5.安装webpack插件,并且讲webpack插件配置到package.json文件中

  1. npm install webpack --save-dev

npm install msbuild:
--save跟--save -dev 的区别
会把msbuild包安装到node_modules目录中
不会修改package.json
之后运行npm install命令时,不会自动安装msbuild

npm install --save:
会把msbuild包安装到node_modules目录中
会在package.json的dependencies属性下添加msbuild
之后运行npm install命令时,会自动安装msbuild到node_modules目录中
之后运行npm install --production或者注明NODE_ENV变量值为production时,会自动安装msbuild到node_modules目录中

npm install --save-dev:
会把msbuild包安装到node_modules目录中
会在package.json的devDependencies属性下添加msbuild
之后运行npm install命令时,会自动安装msbuild到node_modules目录中
之后运行npm install --production或者注明NODE_ENV变量值为production时,不会自动安装msbuild到node_modules目录中

使用原则:
运行时需要依赖的包使用--save,否则使用--save-dev。

webpack环境搭建

React+webpack+Es6环境搭建到Hello world

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

推荐阅读更多精彩内容

  • webpack第一次出现在我的视线,是在一次面试中,当时面试官问我是否了解AMD、CMD、Gulp、webpack...
    云飘雾散阅读 1,796评论 0 1
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,253评论 7 35
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,280评论 2 36
  • Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成...
    EarthChen阅读 424评论 0 1
  • 今年的雨水格外的充沛,又下了整整一天。阴雨连绵的笼罩下,正是宅家里睡大觉的好日子。只是,这么多年了,你居然又出现在...
    王大可小妞阅读 255评论 0 0