从零开始搭建一个基于webpack的Vue开发环境（1）

Macuroon

2019-11-04

前言

看了大量的文章，关于vue都是直接使用vueCli实现vue项目的基本环境搭建，使用最原始的搭建方法的很少很少，深以为要想真正学好vue，还是要将webpack充分理解，同时将其与vue结合，这样即使没有vueCli，搭建vue的环境也不在话下。

下面我们将从1，2，3，总共3个部分，渐进式的改良代码，利用webpack从最基本的项目的环境搭建（第一部分），到利用webpack基于script的vue的项目环境（第二部分），最后到利用webpack搭建基于单文件vue组件的项目环境（第三部分）。相信通过这种方式，对webpack的理解可以到一个不错的高度。

好的，开始进入正题，首先，我们从利用webpack搭建一个最简单的项目开始：
1.安装项目需要的相关依赖包

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev html-webpack-plugin
//这里之所以用mini-css-extract-plugin而不是extract-text-webpack-plugin，是因为我们使用webpack4，而4推荐mini-css-extract-plugin来做css的提取
npm install --save-dev mini-css-extract-plugin

这里我稍微介绍以下，安装的webpack包是webpack的核心，必须有它才能使用webpack，但是光有他不行，还需要webpack-cli这个命令行工具，至于webpack-dev-server则是webpack提供给我们的一个服务器工具，帮助我们在开发环境下启动项目。style-loader和css-loader则是webpack的loader，前者用于向网页中动态插入style标签和css，后者则是转换css中的import和url，file-loader则是针对css或者js中引入的图片进行处理，html-webpack-plugin和mini-css-extract-plugin则是webpack需要的额外的插件，前者用于动态将生成的打包文件插入index.html,后者则是将css提取成单独的css文件.
从零开始搭建一个基于webpack的Vue开发环境（1）

接着我们来挨个看下这些文件的内容,首先是main.css:

.app{
  color:red;
  font-size: 24px;
  width:150px;
  height:100px;
  background-image: url('../img/img.jpg');
  background-repeat: no-repeat;
}

接着是util.js

import img from './img/login-bg.jpg'
export default function say() {
  console.log(img)
  console.log('hellow world')
}

无论是main.css还是util.js,我们都引入了图片,这里关于图片的处理,就是要交给file-loader,因为在webpack的世界里,一切皆模块,但webpack只认识js的模块,对于图片模块,只能交给专门的loader来处理,也就是file-loader
然后是main.js

import say from './util'
import './css/main.css'
say()

template.html的具体内容:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 使用htmlWebpackPlugin和miniCssExtractPlugin这两个插件就不使用下面这种手动导入bundle.js的方式 -->
  <!-- <script src="/custom/bundle.js"></script> -->
</head>
<body>
  <div class="app">
    app的应用
  </div>
</body>
</html>

最后就是核心的webpack.config.js

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
    //output的publicPath决定了异步加载的js，使用htmlWebpackPlugin插入的bundle.js，从css中引入的图片或字体，以及miniCssExtractPlugin分离的css等的文件引用路径
    publicPath: '/dist/'
  },
  mode: 'development',
  devServer: {
    publicPath: "/dist/"
  },
  module: {
    rules: [
      // {
      //   //css样式被bundle.js注入到html页面的style里
      //   test: /\.css$/i,
      //   exclude: /node_modules/,
      //   use: ['style-loader', 'css-loader']
      // },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [{
          loader: miniCssExtractPlugin.loader
        }, 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './images/'
            }
          },
        ],
      },
    ]
  },
  plugins: [
    //在dist下以template.html为模板生成index.html文件，同时将
    //bundle.js插入html文件的body底部
    new htmlWebpackPlugin({
      template: './template.html',
      filename: 'index.html'
    }),
    // 将css样式抽取到单个css文件中，以link文件的方式插入到index.html的head中
    new miniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
}

ok,到这里，我们可以选择打包项目，也可以选择使用webpack-dev-server来启动项目(访问localhost:8080/dist/index.html)即可
这里主要是利用webpack包装了一个js项目，主要是演示关于文件，css，js在webpack中的基本使用，目前还没有引入vue的内容，下面第二部就是将vue加进来

Macuroon

0 关注 0 粉丝 0 动态

关注关注

安科网

从零开始搭建一个基于webpack的Vue开发环境（1）

Macuroon

前言

Macuroon

Macuroon