webpack4.x + vue2.x 构建前端工程化(1)

最新推荐文章于 2022-12-06 00:21:07 发布

denghuixiang6337

最新推荐文章于 2022-12-06 00:21:07 发布

阅读量153

点赞数

文章标签： webpack javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/chessYu/p/11169496.html

版权

本篇文篇纯属个人笔记,实现工程化打包(用打包后的文件可以正常渲染页面),后续继续更新配置开发环境与生产环境,如果有不合理的地方还望各位指点!

不用脚手架，直接用vue和webpack搭建前端工程化项目

首先废话不多说,上手就是干

　　1、npm init -y //创建一个package.json文件 -y选择默认的配置;

npm init -y

　　2、安装webpack、webpack-cli webpack4之后就要另外安装 webpack-cli 否则运行时会抛错，到时候还得安装

npm i webpack webpack-cli --save-dev

　　3、webpack安装好了后，现在开始安装 vue 、vue-loader

npm i vue vue-loader --save-dev

　　安装完后有个提示，说 vue-loader 依赖于 css-loader 但未安装，所以还得安装下 css-loader

　　npm i css-loader --save-dev

　　4、新建基本的项目目录文件 src。及打包的入口文件和相关引用的文件。

　　　　4.1，这三个页面的代码

1.app.vue

<template>
     <div class='test'>{{test}}</div>
</template>


<script>
export default {
     data(){
          return {
               test:"基本的项目依赖"
          }
     }
}
</script>

<style>
.test{
     color:red;
}
</style>

2.main.js

import Vue from 'vue'

import App from './app.vue'

new Vue({

el:'#app',

render: h => h(App)

})

3.index.html

<!DOCTYPE html>

<head>

<title>webpack app</title>

</head>

<body>

</body>

</html>

　　5、修改package.json 文件的 scripts 里面的运行命令。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config config/webpack.config.base.js"      //使用本项目webpack 进行打包，定位到config目录下的webpack.config.base.js  别忘了加 config/ ,不然打包时报错 提示找到文件。。
  },

　　6、基本的两大依赖已经安装完后，现在开始写 webpack 的配置文件了。。

　　　　1，在根目录上新建个config文件夹，在文件夹里新建一个 webpack.config.base.js 这个文件主要是存放生产环境与开发环境配置的共公信息。

　　　　2，在webpack.config.base.js 里面写打包的配置。

const path = require('path');

const config = {

　　　　context: path.resolve(__dirname, '../'),

entry:path.resolve(__dirname,'../src/main.js' ), //这里的为什么上层目录。。其实这跟你配置的 package.json 里面的scripts 里运行的路径有关。

     output:{
          path: path.resolve(__dirname,'../dist'),
          filename:"js/[name]-app-[hash].js",
          publicPath:'./'
     },
     resolve:{
          alias:{
               'vue$':'vue/dist/vue.esm.js',
               '@':path.resolve(__dirname,"../src")
          }
     },
     module:{
          rules:[
               {
                    test:/\.vue$/,
                    loader:'vue-loader'
               },
               {
                    test:/\.css$/,
                    use:[
                         'css-loader'
                    ]
               },
               {
                    test:/\.(png|jpe?g|gif|svg)$/,
                    loader:'url-loader',
                    options:{
                         limit:1024,
                         name:'[name].[ext]-[hash]'
                    }
               }
          ]
     }
}

module.exports = config;

　　7、现在可以运行项目了。npm run build 进行打包了。看下会报什么错，在填坑

　　　　果然踩坑了，看下是什么提示。。。第一段说，vue-loader 依赖的 vue-template-compiler 未安装。第二段 vue-loader 的插件未在webpack中配置。。第三段是基于前二段报的错，类型不对。。

　　　　现在开始安装 vue-template-compiler 和加上vue-loader插件配置。

npm i vue-template-compiler --save-dev

//配置vue-loader插件

　　const vueloaderplugin = require('vue-loader/lib/plugin')

　　在 module下面写入插件的配置

plugins:[

new vueloaderplugin()

]

这两个加完了后在 npm run build 打包看看

　　打包没有报错。而且目录下多了一个dist目录。。打开看一下

　　发现没有主界面。根目录下的 index.html 没有打包进来。。。这光有js没用啊。运行不了啊。怎么办呢，webpack 配置问题。。安装html-webpack-plugin 插件

npm i html-webpack-plugin --save-dev

　　webpack配置中新加入这个插件，并指定参数。

const htmlwebpackplugin = require('html-webpack-plugin')

　context:path.resolve(__dirname,'../'), //与entry、plugins 同级别加这段是关键

plugins:[
     new vueloaderplugin(),
     new htmlwebpackplugin({
         filename:'index.html',
         template:'index.html'   
     })             
]

　　该加的都加上了，再次 npm run build 看下打包成什么样子了

　　有了index.html后，这就放心了。。。打开index.html 在浏览器中运行下看看，有没有渲染成我们想要的样子。。。

发现在我们在 app.vue里面给它写了一个样式啊，现在根本就没有加进来。其实安装css-loader时也要安装一下 style-loader ,npm并没有给提示。这就很头疼，只能自己记住要安装这个包了。现在安装这个style-loader 这个包

npm i style-loader --save-dev

//安装完包后，在webpack里面也要加上配置，module->rules
             {
                    test:/\.css$/,
                    use:[
                         'style-loader',     //style-loader 要在 css-loader 上面。。顺序不能乱
                         'css-loader'
                         
                    ]
               },

重新运行打包后，在浏览器中运行查看，样式已经加上去了。。。还有打包图片、js文件等。在下一篇去实现。现在我把 webpack.config.base.js的配置贴上来。。。

const path = require('path');
const vueloaderplugin = require('vue-loader/lib/plugin')
const htmlwebpackplugin = require('html-webpack-plugin')

const config = {
     context:path.resolve(__dirname,'../'),
     entry:path.resolve(__dirname,'../src/main.js'),
     output:{
          path: path.resolve(__dirname,'../dist'),
          filename:"js/[name]-app-[hash].js",
          publicPath:'./'
     },
     resolve:{
          alias:{
               'vue$':'vue/dist/vue.esm.js',
               '@':path.resolve(__dirname,"../src")
          }
     },
     module:{
          rules:[
               {
                    test:/\.vue$/,
                    loader:'vue-loader'
               },
               {
                    test:/\.css$/,
                    use:[
                         'style-loader',
                         'css-loader'
                         
                    ]
               },
               {
                    test:/\.(png|jpe?g|gif|svg)$/,
                    loader:'url-loader',
                    options:{
                         limit:1024,
                         name:'[name].[ext]-[hash]'
                    }
               }
          ]
     },
     plugins:[
          new vueloaderplugin(),
          new htmlwebpackplugin({
               filename:'index.html',
               template:'index.html'
          })
     ]
}

module.exports = config;

免责声明

本博客所有文章仅用于学习、研究和交流目的，欢迎非商业性质转载。
博主在此发文（包括但不限于汉字、拼音、拉丁字母）均为随意敲击键盘所出，用于检验本人电脑键盘录入、屏幕显示的机械、光电性能，并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表，不会网购无快递。
博主的文章没有高度、深度和广度，只是凑字数。由于博主的水平不高（其实是个菜B），不足和错误之处在所难免，希望大家能够批评指出。
博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章，请原谅博主成为一个无耻的文档搬运工！

转载于:https://www.cnblogs.com/chessYu/p/11169496.html

denghuixiang6337

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4.x + vue2.x 构建前端工程化(1)

本篇文篇纯属个人笔记,实现工程化打包(用打包后的文件可以正常渲染页面),后续继续更新配置开发环境与生产环境,如果有不合理的地方还望各位指点!不用脚手架，直接用vue和webpack搭建前端工程化项目首先废话不多说,上手就是干　　1、npm init -y //创建一个package.json文件 -y选择默认的配置;npm init -y...
复制链接

扫一扫