模块化第一步 初始化 package.json 文件
node.js 指令 npm init
npm的官网:https://www.npmjs.com/ 搜索插件名,查看插件的用法
1. webpack 虽然并没有什么突出的地方,但是他的插件却非常多且好用;
npm node包管理工具,可以对包进行 增 删 查 改
下载 npm 包的指令 npm install 包名
2. cnpm 淘宝 npm 镜像:与 npm 一样,但是比 npm 下载的快
指令:npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 利用 browserify 对 js 文件,进行打包编译
下载指令:npm install browserify --save-dev
打包指令:browserify 主文件>要打包的文件
4. 利用 package.json 文件,恢复之前所下载的包
指令:npm install
5. webpack 可以对前端资源进行打包 (前端资源:js css json 图片均可打包)
下载指令:npm install webpack@3.8.1 --save-dev (--save-dev:开发环境, @指令版本号 )
6. webpack-dev-server 可以通过ctrl+s 来进行实时刷新的插件
下载指令:npm install webpack-dev-server@2.9.4 --save-dev (webpack的附属产品,要比webpack第一个大版本,如 webpack 是3点多的版本,他的附属产品只能的2点多)
实时刷新指令:webpack-dev-server --hot --inline
7. 如果只想用 webpack 来实现一键打包,我们需要在当前目录下,创建一个 webpack.config.js 文件
文件内容的配置:https://www.cnblogs.com/shangjun6/p/10980093.html
8. 如果我们想 通过一个指令来跑我们的 node.js,我们只能通过 package.json 文件
指令:npm run dev
文件内容的配置:https://www.cnblogs.com/shangjun6/p/10980087.html
9. 想要去改相对路径变成绝对路径 我们需要用到 node 自带的插件;
指令:var path=require("path");
用法:path.resove() 方法,参数一:必填:dirname(当前目录) 参数二:必填:"./指定目录下" 在 webpack.config.js中操作
10. 要自动打开浏览器的插件:open-browser-webpack-plugin
下载指令:npm open-browser-webpack-plugin --save-dev
文件内容的配置:官网搜 open-browser-webpack-plugin
11. 配置服务器:通过 devServer 属性 在webpack.config.js 文件,接口 module.exports={} 中
指定跟目录:contentBase:
指定端口:port:
12. 打包图片的插件
指令下载:npm install url-loader --save-dev 主要是针对 css 打包的背景图,不好用
插件用法:官网搜 url-loader
13. 打包 css 的插件
指令下载:npm install style-loader css-loader --save-dev
插件用法:官网搜 css-loader
14. 打包 json 的插件
指令下载:npm install json-loader --save-dev
插件用法:官网搜 json-loader
15. 打包 es6 插件(将 es6 转为 es5 )
指令下载:npm install -D babel-loader @babel/core @babel/preset-env
插件用法:官网搜 babel-loader
16. 将 css 与 js 分离的插件
指令下载:npm install extract-text-webpack-plugin --save-dev
插件用法:官网搜 extract-text-webpack-plugin
17. less的配置:(es6写法的css文件)
指令下载:npm install less less-loader --save-dev
插件用法:官网搜 less-loader
18. 查看 node 的版本
指令:node -v