1：安装node和npm运行的环境是基于node的，npm包管理工具
npm常用操作：
:查看配置
npm config get 变量名 查看某个变量配置信息
npm config set 变量名 value 修改配置文件中指定变量的值
example:
npm config set registry https://registry.npm.taobao.org //修改仓库镜像地址为淘宝镜像地址
另一种方式可以安装cnpm：
npm install-g cnpm--registry=https://registry.npm.taobao.org
后面使用cnpm install 包名 即可
npm 设置包安装路径
npm config set cache "D:\ApplicationSerivce\NodeJs"
npm config set prefix "D:\ApplicationSerivce\NodeJs"
2：安装webpack，因为开发中经常使用到webpack所以建议直接全局安装
同时安装几个常用的加载器，css-loader，style-loader，加载器局部安装然后再webpack.config.js中配置加载器
npm install style-loader --save(局部安装加载器)
webpack配置其中loaders为配置加载器
module.exports= {
entry: __dirname +"/app/vue.js",//已多次提及的唯一入口文件
output: {
path: __dirname +"/public",//打包后的文件存放的地方
filename:"bundle.js"//打包后输出文件的文件名
},
module: {
loaders: [
{test:/\.css$/,loader:"style-loader!css-loader"}
]
}
}
打包命令既可以直接使用webpack，执行的时候webpack会获取当前项目目录下面的配置文件，根据设置的规则进行相关的操作，也可以在项目的package.json中配置npm的脚本命令；例如下面的这个配置当我们执行 npm start的时候等价于执行webpack
{
"name":"shaozhen",
"version":"1.0.0",
"description":"测试信息",
"main":"app/vue.js",
"dependencies":{
"css-loader":"^0.28.4",
"style-loader":"^0.18.2",
"vue":"^2.4.2"
},
"devDependencies":{},
"scripts":{
"test":"echo\"Error: no test specified\"&& exit 1",
"start":"webpack"
},
"author":"",
"license":"ISC"
}
入门总结：
webpack可以帮助我们把一些指定的文件通过对应的加载器打包成浏览器可以解析的格式，比如css,js。也可以将多个文件合并成一个文件减少网络请求，我们通过配置入口文件输出规则就基本可以完成自己所需要的功能，只是入门而已，后面就需要根据全面的文档充分了解他的功能，然后投入使用。
3：每次修改完源文件都需要重新打包确实蛋疼，所以可以使用webpack的webpack-dev-server进行热部署
首先安装下对应的包 在项目目录下执行 npm install webpack-dev-server
然后简单修改下npm的package.json的start脚本执行命令为：
webpack-dev-server --progress --colors --port=9002（备注可以添加--content-base指定根目录路径）
监听端口9002，有点需要注意的是每次生成的打包文件都是输出到内存里，所以磁盘里面是看不到的，而且生成的文件默认位于根目录下面，也可以在webpack.config.js中通过配置publicPath进行条调整
具体的操作可以参考(SegmentFault)
最后执行npm start
我们通过访问localhost:9002就可以测试访问了
中文官网文档：中文官网地址
第三方翻译文档：第三方翻译
网友评论