vue webpack自动化开发
2016-12-15 19:16
337 查看
一.vue自动化
1. sudo cnpm install 安装node-module
sudo cnpm install
2. 报错安装这些包
sudo cnpm install babel-plugin-transform-runtime css-loader
3.安装完成后webpack更新打包
webpack
sudo cnpm install clean-webpack-plugin
4.打包成功后,开启服务器
webpack-dev-server
5.自动化完成,每次修改内容,只要webpack打包就可自动更新页面
问题解决:
1.ERROR in Cannot find module 'cssnano'
删掉node-module重新安装
2.ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/lan/Desktop/home2/app/sort/sort.index.jsin
/Users/lan/Desktop/home2
:路径写错了
3.peerDependencies WARNINGvue-loader@8.5.4
requires a peer ofbabel-plugin-transform-runtime@^6.8.0 but none was installed
缺包:sudo cnpm install babel-plugin-transform-runtime
4.Error: Cannot find module 'html-webpack-plugin'
没有发现这个module文件:sudo cnpm install html-webpack-plugin
5.Error: Cannot find module 'clean-webpack-plugin'
sudo cnpm install clean-webpack-plugin
6.lsg:home lan$ nrm -v
-bash: nrm: command not found
sudo npm install nrm -g
二 设置图片文件夹
1.把文件夹放在每个项目文件夹里面
如login/img
在webpack.config.js文件中demodule:
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=1000&name=images/[name].[ext]',
},
2.进入主文件夹home,安装module:url-loader file-loader
sudo cnpm install url-loader file-loader
3.webapck打包,开启服务器webpack-dev-server就可自动刷新
三. 打包公共js部分文件
1.在webpack.config.js文件中头部加上:
var webpack = require('webpack');
2.在webpack.config.js文件中plugins:加上这个插件(注意逗号)
new webpack.optimize.CommonsChunkPlugin({ //重复的内容打包到common.js中,减少文件大小
name: 'common', //合并公共模块到指定的js文件
filename: 'js/common.js' //指定生成在www文件夹中的js文件夹中,生成名字为common.js
}),
(注意): 在output中生成文件设置路径:
output:{
path:"./www", //指定在www下生成js文件夹的js文件,不可写www/js(这所以的文件样都生成在js文件夹中了)
filename:"js/[name].js"
},
(注意): 在module中生成文件设置路径:
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=1000&name=images/[name].[ext]',
},
3.更新打包
webpack
结果:生成common.js文件
四.压缩js模块
1.在webpack.config.js文件中头部加上:
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//压缩JS模块
2.在webpack.config.js文件中plugins:加上:这个插件(注意逗号)
new uglifyJsPlugin({ //压缩代码js
compress: {
warnings: false
}
}),
3.更新打包
webpack
五.加入jquery-3.0.0.js文件(写jq使用)
1.文件放在app/commons里面
2.在webpack.config.js文件中plugins:加上:这个插件
new webpack.ProvidePlugin({
$:path+"/commons/jquery-3.0.0.js", //绝对路径
}), //直接加载到全局不需要require()
3.webpack打包
六.重置样式
1.公共引入重置样式css文件, 当前目录app/commons/reset.css
2.开发目录里面的js文件要引入样式
import reset from '../commons/reset.css';
3.加入module:{ }里面
{ //重置样式
test: /\.css$/,
loader: 'style-loader!css-loader'
},
4.webpack
报错:Module not found: Error: Cannot resolve module 'style-loader' in /Users/lan/Desktop/home3/app/login
(1).安装 style-loader插件:
sudo cnpm install style-loader
5.开启服务器
成功:重置样式加载进login文件的<head></head>中
七.引用公共框架样式
1.例如单项目login要引用框架样式weicin.css,则引入口在login
的js文件中,index.js
import weiui from '../commons/weicin.css'; //引入UI框架
2.webpack,开启服务器
1. sudo cnpm install 安装node-module
sudo cnpm install
2. 报错安装这些包
sudo cnpm install babel-plugin-transform-runtime css-loader
3.安装完成后webpack更新打包
webpack
sudo cnpm install clean-webpack-plugin
4.打包成功后,开启服务器
webpack-dev-server
5.自动化完成,每次修改内容,只要webpack打包就可自动更新页面
问题解决:
1.ERROR in Cannot find module 'cssnano'
删掉node-module重新安装
2.ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/lan/Desktop/home2/app/sort/sort.index.jsin
/Users/lan/Desktop/home2
:路径写错了
3.peerDependencies WARNINGvue-loader@8.5.4
requires a peer ofbabel-plugin-transform-runtime@^6.8.0 but none was installed
缺包:sudo cnpm install babel-plugin-transform-runtime
4.Error: Cannot find module 'html-webpack-plugin'
没有发现这个module文件:sudo cnpm install html-webpack-plugin
5.Error: Cannot find module 'clean-webpack-plugin'
sudo cnpm install clean-webpack-plugin
6.lsg:home lan$ nrm -v
-bash: nrm: command not found
sudo npm install nrm -g
二 设置图片文件夹
1.把文件夹放在每个项目文件夹里面
如login/img
在webpack.config.js文件中demodule:
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=1000&name=images/[name].[ext]',
},
2.进入主文件夹home,安装module:url-loader file-loader
sudo cnpm install url-loader file-loader
3.webapck打包,开启服务器webpack-dev-server就可自动刷新
三. 打包公共js部分文件
1.在webpack.config.js文件中头部加上:
var webpack = require('webpack');
2.在webpack.config.js文件中plugins:加上这个插件(注意逗号)
new webpack.optimize.CommonsChunkPlugin({ //重复的内容打包到common.js中,减少文件大小
name: 'common', //合并公共模块到指定的js文件
filename: 'js/common.js' //指定生成在www文件夹中的js文件夹中,生成名字为common.js
}),
(注意): 在output中生成文件设置路径:
output:{
path:"./www", //指定在www下生成js文件夹的js文件,不可写www/js(这所以的文件样都生成在js文件夹中了)
filename:"js/[name].js"
},
(注意): 在module中生成文件设置路径:
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=1000&name=images/[name].[ext]',
},
3.更新打包
webpack
结果:生成common.js文件
四.压缩js模块
1.在webpack.config.js文件中头部加上:
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//压缩JS模块
2.在webpack.config.js文件中plugins:加上:这个插件(注意逗号)
new uglifyJsPlugin({ //压缩代码js
compress: {
warnings: false
}
}),
3.更新打包
webpack
五.加入jquery-3.0.0.js文件(写jq使用)
1.文件放在app/commons里面
2.在webpack.config.js文件中plugins:加上:这个插件
new webpack.ProvidePlugin({
$:path+"/commons/jquery-3.0.0.js", //绝对路径
}), //直接加载到全局不需要require()
3.webpack打包
六.重置样式
1.公共引入重置样式css文件, 当前目录app/commons/reset.css
2.开发目录里面的js文件要引入样式
import reset from '../commons/reset.css';
3.加入module:{ }里面
{ //重置样式
test: /\.css$/,
loader: 'style-loader!css-loader'
},
4.webpack
报错:Module not found: Error: Cannot resolve module 'style-loader' in /Users/lan/Desktop/home3/app/login
(1).安装 style-loader插件:
sudo cnpm install style-loader
5.开启服务器
成功:重置样式加载进login文件的<head></head>中
七.引用公共框架样式
1.例如单项目login要引用框架样式weicin.css,则引入口在login
的js文件中,index.js
import weiui from '../commons/weicin.css'; //引入UI框架
2.webpack,开启服务器
相关文章推荐
- 做一个gulp+webpack+vue的单页应用开发架子
- 基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)
- 基于webpack和vue.js搭建开发环境
- 基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
- webpack中vue-cli开发跨域的问题
- webpack-dev-server+vue构建开发环境(一)
- 用Vue.js和Webpack开发Web在线钢琴
- 详解基于webpack和vue.js搭建开发环境
- FE - 走向Node与Webpack 之路 - vue 与 webpack 简单开发环境
- vue-cli webpack 开发环境跨域详解
- Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 【WEB开发】webpack+vue构建前端开发环境
- 基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
- vue 多项目 依赖webpack开发共用 配置
- 用Vue.js和Webpack开发Web在线钢琴
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- windows环境下搭建vue+webpack的开发环境
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
- Vue.js——60分钟快速入门 开发· webpack 中文文档