如何从零开始一个 vue+webpack 前端工程工作流的搭建, 首先我们先从项目的目录结构入手. 一个持续可发展, 不断加入新功能, 方便后期维护的目录结构究竟是长什么样子的? 接下来闰土大叔带你们一起手摸手学起来.
初级前端初始化目录篇
项目伊始, 我们肯定是先在 terminal 终端命令行 (以下简称 terminal)cd 进入 < project name > 根目录, 然后输入 npm init 初始化一个 npm 项目, 在项目根目录下面就会出现一个 package.json 文件. 然后就可以安装依赖了, 直接在 terminal 里输入
npm i webpack vue vue-loader -D
. 当我们把这几个安装好以后, terminal 这边会提示我们 WARN(警告):
翻译过来大意是, vue-loader 需要一个 CSS-loader 和 vue-template-compiler 作为它的第三方依赖, 所以听它的话, 我们去进行一下安装:
npm i css-loader vue-template-compiler -D
那下面的警告信息提示我们缺少一些信息, 这个其实无关痛痒, 所以不需要去关心它.
通过以上简单几个步骤, 我们的项目就初始化好了. 然后在根目录下面创建一个 src 文件夹, 这是我们源码放置的目录. 然后我们在 src 目录下面新建一个 app.vue 文件, 里面就可以写一些关于项目的业务代码:
- <template>
- <div id="test">
- {{text}}
- </div>
- </template>
- <script>
- export
- default {
- data() {
- text:
- '闰土大叔'
- }
- }
- </script>
- <style>
- #test{ font-size:12px; color:green; }
- </style>
当然这个后缀为. vue 文件是不可以在浏览器里直接运行的, 我们需要想办法让它运行起来.
现在我们要在项目根目录下新建一个 webpack.config.js 文件, webpack 是帮我们前端来打包资源的, 前端资源有很多不同的类型, 比如说 JavaScript,css,html,image,iconfont 等这些资源都是需要通过 http 请求加载的东西. webpack 是将一个 js 文件加载到浏览器端之后, 然后去把所有的内容去渲染出来. 所以, 很多时候, 我们可以把 js 文件作为项目的入口文件.
这个时候, 我们在 src 目录下新建一个 index.js 作为入口文件, 顺便在里面写点东西:
- import Vue from 'vue'
- import App from './app.vue'
- const root = document.createElement('div')
- document.body.appendChild(root)
- new Vue({
- render: (h) => h(App)
- }).$mount(root)
index.js 准备完毕之后, 那么在 webpack.config.js 里面就可以这样写:
- const path = require('path')
- module.exports = {
- entry: path.join(__dirname, 'src/index.js'),
- output: {
- filename: 'bundle.js',
- path: path.join(__dirname, 'dist')
- }
- }
在上面的代码中,__dirname 就代表这个文件所在的目录地址, path.join() 的意思就是和后面的字符串路径拼接起来, 形成一个绝对的路径.
然后通过 webpack 把所有的文件打包成一个 bundle.js 文件, 并且是能在浏览器里面直接运行的代码. 现在我们可以在 package.json 文件里的 scripts 对象里面添加一个脚本:
- "scripts": {
- "build": "webpack --config webpack.config.js"
- }
看到这儿, 肯定有童鞋要问了, 为什么要在这里面调用 webpack 而不是在 terminal 里面直接运行呢?
因为只有在这里调用 webpack, 它才会优先调用我们项目里面安装的 webpack 版本, 如果我们在命令行里面输入 webpack, 它会调动全局的 webpack, 这个时候全局的 webpack 可能会跟我们项目中的 webpack 版本不一致, 所以我们还是采取这种方式比较稳妥.
写完之后, 我们就可以在 terminal 输入 npm run build 跑一下, 会尴尬地发现报错了:
这个错误告诉我们, 需要为. vue 文件去声明一个 loader. 因为 webpack 原生是只支持 JS 文件类型的, 并且只支持 ES5 的语法, 所以我们在使用超出它理解范围的语法的时候, 我们要使用一些帮它去处理的工具. 所以我们要在 webpack.config.js 文件里面继续写:
- module: {
- rules: [
- {
- test: /.vue$/,
- loader: 'vue-loader'
- }
- ]
- }
添加完这段之后, 我们再去 terminal 执行下 npm run build, 你会发现项目根目录下多了一个 dist 文件夹, 点开里面发现 webpack 为我们自动打包生成了一个 bundle.js 文件, 感兴趣的童鞋可以点开这个 js 文件看看:
来源: https://www.cnblogs.com/running-runtu/p/8799415.html