Ivanazyf 2019-06-29
先在文章开头,做一个总结式的说明,这篇文章主要是讲在前端模块化开发模式中如何用<b>Webpack</b>
这样流行的打包器来为当下一个很火热的框架——vue.js
,构建一个项目框架。本文例子是一个基本的Demo,想构建更为复杂和高维护性的框架,请参考Webpack官网Guide教程
要看懂本文的Demo,需要你掌握或了解以下内容:
ES5/ES6
当然还有htmlcssjs的基础,但是相信读者如果在查阅vue或者webpack相关内容,说明已经掌握了基本的技能
node v10.12.0
,npm 6.4.1
,webpack 4.27.1
,webpack-cli 3.1.2
webpack.config.js
配置文件,并写入项目框架配置loader
,插件plugin
,dev
工具等),包括vue
,vue-loader
,vue-template-compiler
*.vue
组件,我们这里仅做了一个示范,没有复杂业务逻辑dev-server
,开启一个开发模式的小服务器通过以上7步,我们就可以构建一个简单高效的vue模块化开发
框架了
说明一下:笔者的webpack和webpack-cli都是全局安装的,但有时候会出现某些webpack依赖包`not found`的问题,这时候可能是因为webpack4中把webpack-cli工具分离开了,导致可能在全局找不 到cli这时候先执行`npm link webpack` 和 `npm link webpack-cli`将他们加入全局环境执行
cmd
mkdir webpackVue cd webpackVue npm init
根据命令行的提示,填写package name, version ,description ,entry point等信息
构建结果如下:
现在的项目结构如下:
我们来看看这个webpack.config.js
里都有什么?
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const webpack = require('webpack'); module.exports = { mode : 'development', entry : { index : './src/index.js' }, output : { filename : '[name].bundle.js', path : path.resolve(__dirname,'dist'), publicPath : './' }, module : { rules : [ { test : /\.css$/, use : ['style-loader','css-loader'] }, { test : /\.html$/, loader : 'html-loader' }, { test : /\.vue$/, loader : 'vue-loader' } ] }, resolve : { alias : { vue : 'vue/dist/vue.js' } }, plugins : [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ title : 'vue+webpack模块化开发简例', filename : 'index.html', template : './src/index.html', }), new webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin(['dist']) ], devtool : 'inline-source-map', devServer : { contentBase : './dist', watchContentBase : true, compress : true, port : 8080, hot : true, open : true, } }
mode : 有三个值可以设置,development
/production
/none
,一般来说我们常用的就是development
和production
,这里我们设为开发模式
entry :译为入口,这里配置的是我们webpack从哪里开始分析我们项目中包的依赖,从哪里开始打包我们的文件,入口可以不只一个,多入口的用法请参见官方文档entry points,我这里仅以一个入口为例
output :对应与entry,这是告诉webpack把我们打包后的文件放到哪里,这里的
./
,通过这个配置,则打包之后的index.html文件中引入js的路径就会统一加上./
,这个在下面还会提到