webpack作用模块打包工具，并可以自动处理各个模块之间的依赖
webpack安装命令
npm install webpack@3.6.0 -g @后面指点版本号 -g是全局安装的意思
npm install webpack@3.6.0 --save -dev 这是局部安装，全局安装的版本可以是最新的，局部安装可以根据项目需求定义
src源码文件夹
dist打包后的文件
const past=require（’path‘） 这是引入node的路径函数，使用这个需要使用npm init初始化
使用npm init文件会生成一个packjson.json文件，这里面有需要的依赖，如果你的文件别人使用拷贝过去之后直接使用npm install 命令会直接根据packjson里的配置依赖，来安装需要的依赖程序.
css和less依赖loader
css-loader 对css进行编译
style-loader 对编译后的css加载到dom中
less-loader 对less进行编译
less less工具
<style lang="less" scoped> //在vue文件中使用less或者sass文件时需要在style中加 lang="less/sass"
图片依赖loader
.url-loader 像 file loader 一样工作，但如果文件小于限制 配置文件有文件大小限制，如果图片超过限制会报错你
file-loader 将文件发送到输出文件夹，
vue的项目中less和装less-loader的时候经常会因为版本过高报错
es6语法依赖
babel-loader es6转换为es5
npm install babel-loader@7 babel-core babel-preset-es2015
vue依赖
npm install vue --save
npm install vue-loader --save-dev
npm install vue-template-compiler --save-dev
注意
-dev是开发时依赖，只有开发时才需要的东西要加-dev，如果最终项目需要依赖的东西那么就不要加-dev
plugins插件
HtmlWebpackPlugins：这个是将index.html也打包到目录文件夹
安装方法：npm install html-webpack-plugin --save-dev
webpack配置方法：new HtmlWebpackPlugin({template:'index.html'})
uglifyjs-webpack-plugin 压缩js
安装方法：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
webpack配置方法：new HtmlWebpackPlugin({template:'index.html'})
配置本地开发服务器
安装方法：npm install webpack-dev-server@2.9.3 --save-dev
网友评论