vue webpack自动化开发

来源：互联网发布：linux启动盘制作编辑：程序博客网时间：2024/05/20 18:40

一.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,开启服务器

0 0