6.webpack中配置Vue
引入vue.js
- 后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织vue的组件。所以，下面我们来学习一下如何在我们的webpack环境中集成Vuejs。现在,我们希望在项目中使用Vuejs ,那么必然需要对其有依赖,所以需要先进行安装（注:因为我们后续是在实际项目中也会使用vue的,所以并不是无发时依赖）
npm install vue --save
- 那么，接下来就可以按照我们之前学习的方式来使用Vue了
运行index.html
打包项目-错误信息
> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.
■修改完成后,重新打包，运行程序:
- 打包过程没有任何错误(因为只是多打包了-一个vue的js文件而已),但是运行程序,没有出现想要的效果,而且浏览器中有报错
■这个错误说的是我们使用的是runtime-only版本的Vue ,什么意思呢?
- Vue不同版本构建
- runtime-only →代码中,不可以有任何的template
- runtime-compiler >代码中,可以有template,因为有compiler可以用于编译template
■所以我们修改webpack的配置,添加如下内容即可
修改main.js
[Vue warn]: Cannot find element: #app这个报错注意bundle.js引入的位置，要在body标签的末尾
以上步骤完成报错消失
el和template区别(一)
■正常运行之后,我们来考虑另外一个问题:
- 如果我们希望将data中的数据显示在界面中,就必须是修改index.html
- 如果我们后面自定义了组件,也必须修改index.html来使用组件
- 但是html模板在之后的开发中,我并不希望手动的来频繁修改,是否可以做到呢?
■定义template属性:
- 在前面的Vue实例中。我们定义了el属性,用于和index.html中的#app进行绑定,让Vue实例之后可以管理它其中的内容
- 这里.我们可以将div元素中的({message})内容删掉,只保留一个基本的id为div的元素
- 但是如果我依然希望在其中显示({message})的内容.应该怎么处理呢?
我们可以再定义一个template属性,代码如下:
Vue组件化开发引入
■在学习组件化开发的时候.我说过以后的Vue开发过程中,我们都会采用组件化开发的思想。
- 那么,在当前项目中,如果我也想采用组件化的形式进行开发,应该怎么做呢?
■查看下面的代码:
- 当然,我们也可以将下面的代码抽取到一个js文件中,并且导出。
但是模板与js代码没有进行分离，我们需要进一步改进
el和template区别 (二)
■重新打包,运行程序,显示一样的结果和HTML代码结构
■那么, el和template模板的关系是什么呢?
- 在我们之前的学习中,我们知道e|用于指定Vue要管理的DOM ,可以帮助解析其中的指令、事件监听等等.
- 而如果Vue实例中同时指定了template ,那么template模板的内容会替换掉挂载的对应el的模板。
■这样做有什么好处呢?
- 这样做之后我们就不需要在以后的开发中再次操作index.html ,只需要在template中写入对应的标签即可
■但是,书写template模块非常麻烦怎么办呢?
- 没有关系,稍后我们会将template模板中的内容进行抽离。
- 会分成三部分书写: template、script. style ,结构变得非常清晰。
新建App.vue文件夹（(*￣(oo)￣)：这里的main.js就是之前依赖css和less的那个文件，只是换了个地方，其他地方注意路径更换）
直接npm run build会报错，原因我们没有安装vue对应的loader安装包
.vue文件封装处理
■但是一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的
- 一方面编写template模块非常的麻烦
- 另外-方面如果有样式的话,我们写在哪里比较合适呢?
■现在,我们以一种全新的有式来组织一 个vue的组件
■但是,这个时候这个文件可以被正确的加载吗?
- 必然不可以,这种特殊的文件以及特殊的格式,必须有人帮助我们 处理。用 vue-loader从及vue-template-compiler.
■安装vue-loadervue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
■修改webpack.config.js的配置文件:
npm run build出现bug
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in
再npm install->npm run build
.vue文件中添加子组件
父组件中
npm run build
让导入文件免写.XXX后缀
6.plugin的使用
认识pluigin
plugin是什么?
- plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
- webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
loader和plugin区别
- loader主要用于转换某些类型的模块,它是一一个转换器。
- plugin是插件,它是对webpack本身的扩展,是-个扩展器。
plugin的使用过程:
- 步骤一: 通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
- 步骤二:在webpack.config.js中的plugins中配置插件。
■下面,我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容,让我们的webpack变得更加好用。
添加版权的Plugin
■我们先来使用一个最简单的插件,为打包的文件添加版权声明
- 该插件名字叫BannerPlugin ,属于webpack自带的插件。
■按照下面的方式来修改webpack.config.js的文件:
■重新打包程序:查看bundle.js文件的头部，看到如下信息
打包html的plugin
■目前,我们的index.htmI文件是存放在项目的根目录下的。
- 我们知道,在真实发布项目时.发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件.那么打包的js等文件也就没有意义了。
- 所以.我们需要将index.htm|文件打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件
■ HtmlWebpackPlugin插件可以为我们做这些事情:
- 自动生成一个index.html文件(可以指定模板来生成)
- 将打包的js文件.自动通过script标签插入到body中
■安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
■使用插件,修改webpack .config.js文件中plugins部分的内容如下:
修改完配置之后报错
修改html-webpack-plugin版本
npm install更新node_module包
完成之后index.html打包到dist文件夹中
- 这里的template表示根据什么模板来生成index.html
- 另外,我们需要删除之前在output中添加的publicPath属性
- 否则插入的script标签中的src可能会有问题
js压缩的Plugin
■在项目发布之前,我们必然需要对js等文件进行压缩处理
- 这里,我们就对打包的js文件进行压缩
- 我们使用一个第三方的插件uglifyjs-webpack-plugin ,并且版本号指定1.1.1 ,和CL2保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
安装成功
■修改webpack.config.js文件,使用插件:
■查看打包后的bunlde.js文件,是已经被压缩过了。但是开发时不建议使用。
7.搭建本地服务器
■webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实
现我们想要的让浏览器自动刷新显示我们修改后的结果。
■不过它是一个单独的模块,在webpack中使用之前需要先安装它
npm install --save-dev webpack-dev-server@2.9.1
■ devserver也是作为webpack中的一 个选项,选项本身可以设置如下属性:
- contentBase :为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
- port :端口号
- inline :页面实时刷新
- historyApiFallback :在SPA页面中,依赖HTML5的history模式
■ webpack.config.js文件配置修改如下:
■我们可以再配置另外一个scripts :
- –open参数表示直接打开浏览器
不用再一次一次npm run build 运行查看结果
之后 npm run dev
再修改vue中内容直接刷新页面即可
分离开发和发布时文件
新建文件夹以及如图的三个js文件
合并到主干
cnpm install webpack-merge --save-dev
base.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/main.js',//入口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 13000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
],
},
resolve: {
extensions: ['.js', '.css', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new webpack.BannerPlugin('最终版权归aaa所有'),
new HtmlWebpackPlugin({
template: 'index.html'
}),
],
}
dev.config.js
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
devServer:{
contentBase: './dist',
inline:true
}
})
prod.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
plugins: [
new UglifyjsWebpackPlugin()
],
})
配置好后删除dist再npm run build
修改为
就可以了
（以上内容根据微博“coderwhy”的vue视频课程整理）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
