内容简介:作者:心叶时间:2019年01月30日 10:37由于webpack的配置具有实时性,之前搭建的vue2项目是基于webpack2,因此,特地在此维护一篇关于webpack4搭建vue2项目的说明,会及时更新(github地址:
作者:心叶
时间:2019年01月30日 10:37
前要
由于webpack的配置具有实时性,之前搭建的vue2项目是基于webpack2,因此,特地在此维护一篇关于webpack4搭建vue2项目的说明,会及时更新(github地址: https://github.com/yelloxing/... )。
基础配置
npm install --save-dev vue vue-router
由于是搭建vue2项目,首先需要安装用到的vue和vue路由。
npm install --save-dev webpack webpack-cli
接着,安装webpack,建立好空的webpack.config.js,如下:
module.exports = { entry: ['./src/entry.js'], output: { path: __dirname, filename: 'build/main.js' }, resolve: { alias: { 'vue': 'vue/dist/vue.js' } }, module: { rules: [] } };
上面的配置和webpack2的没有区别,这里不再赘述了(entry:打包入口,output:打包文件存放地址,resolve的配置是因为vue2在开发和生成模式对象不统一)。
解析vue2
npm install --save-dev vue-template-compiler vue-loader
首先安装vue模板解析器,接着,在webpack.config.js中配置一下:
... rules: [{ test: /\.vue$/, use: ['vue-loader'] }] ...
配置的时候,其实就是加上上面这二句代码。
到此为止,最简单的项目就搭建好了。
为了方便执行,在package.json中添加下面脚本:
"scripts": { "release": "node_modules/.bin/webpack" }
然后在命令行执行:
npm run release
搭建开发环境
上面的打包方式时候开发完毕以后,发布代码,如果是开发中,我们希望实时刷新。
首先安装服务器:
npm install --save-dev webpack-dev-server
接着在webpack中配置:
... devServer: { contentBase: './', compress: true, host: 'localhost', port: '20000', hot: true, inline: true, historyApiFallback: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ], module: ...
然后,在package.json中添加下面脚本:
"scripts": { "dev":"node_modules/.bin/webpack-dev-server --open", "release": "node_modules/.bin/webpack" }
执行下面命令:
npm run dev
浏览器会自动打开:localhost:20000
完善vue配置
npm install --save-dev vue-style-loader css-loader
上面是添加项目中对css的解析器,再在webpack.config.js中添加如下配置,即可开发css代码:
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }
添加对scss的支持
npm install --save-dev sass-loader node-sass
然后,添加下面配置:
{ test: /\.scss$/, use: ["vue-style-loader", "css-loader", "sass-loader"] }
添加对图片的支持
npm install --save-dev file-loader
然后,添加下面配置:
{ test: /\.(png|jpg|jpeg|gif|bmp)$/, use: ['file-loader?limit=7000&name=build/image/[name].[ext]'] }
如果你使用的图片格式不被上面的test包含,需要手动额外添加即可。
后记
完整的代码维护在github中,会及时更新: https://github.com/yelloxing/...
希望对你学习vue2有所帮助 :)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。