从零开始的 webpack4 + vue2.x

最新推荐文章于 2024-03-20 11:54:40 发布

羲和生

最新推荐文章于 2024-03-20 11:54:40 发布

阅读量1.1k

点赞数 1

分类专栏： web

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

新建文件夹 webpack-vue

安装依赖

npm init  //初始化package.json
npm add webpack webpack-cli   //添加webpack、webpack-cli

//ps:不知那个版本开始就需要安装webpack-cli了

新建index.html

// index.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>webpack v4</title>
</head>
<body>
    <div id="root"></div>
    <script src="dist/main.js"></script>
</body>
</html>

新建文件夹src，在src下新建index.js

// src/index.js
console.log('hello webpack v4');

第一次打包

//终端
webpack

你会发现目录底下多了dist文件夹里面有main.js，打开index.html 可以看到console里已经打印出了hello webpack v4,
在终端会有一个警告提示，大致意思是没有设置mode将会使用生产模式，需要指定开发环境或者生产环境，打开dist/main.js，发现js确实是被压缩过的

//console
hello webpack v4

package.json

//package.json
...
"scripts":{
    "start":"--mode development",
    "build": "--mode production"
 }
...

第二次打包

npm start   //开发环境
npm build   //生产环境（压缩）

webpack-dev-server

手动打开浏览器太麻烦

//终端
npm add webpack-dev-server   //添加webpack-dev-server

//修改index.html
<script src="main.js"></script>

//修改package.json
...
"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }
...

第三次打包

npm start

自动打开浏览器了，
修改index.js试试

加入Vue

我们将一个一个解决问题，不会一次安装所有依赖

npm add vue //添加依赖

在src下面新建文件夹pages,在pages里面新建app.vue文件

//app.vue
<template>
    <section class="main">
        <p>我来了{{name}}</p>
    </section>
</template>

<script>
export default {
    data () {
        return {
            name:"vue + webpack"
        }
    }
}
</script>

<style>
.main>p{
    color: #000;
}
</style>

修改index.js

import Vue from 'vue'
import App from './pages/app.vue'

new Vue({
    el:"#root",
    render:h=>h(App)
})

//终端
npm start

这时候可预见的报错来了，

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
//翻译：模块解析失败，您可能需要一个适当的加载程序来处理这个文件类型

看报错，我们一个个解决
搜索关键词，很容易发现是没有安装vue-loader,命令行：

//终端
npm add vue-loader

新建webpack.config.js

//webpack.config.js
module.exports = {
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'}
        ]
    }
}

vue-loader在15之后需要在webpack.config.js中当插件引入,完整的如下(注意：css这个必须引入，不然在.vue文件使用样式会报错)

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

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
  ]
}

//终端
npm start

再次报错

Uncaught Error: Module build failed: Error: Cannot find module 'vue-template-compiler'
...

很明显，要你安装vue-template-compiler

npm add vue-template-compiler

//终端
npm start

继续报错

Module not found: Error: Can't resolve 'css-loader'

提示安装css-loader

npm add css-loader

bingo! webpack4+vue2第一个项目成功运行

从js中分离css

这时候细心的你发现css被塞到head里面，我们来把css分离出来。使用webpack的插件extract-text-webpack-plugin@next

npm add extract-text-webpack-plugin@next

在webpack.config.js中添加插件

//webpack.config.js
const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin');  //引入插件

module.exports = {
    module:{
        rules:[
            { 
                test: /\.vue$/, 
                loader: 'vue-loader',
                options: { 
                    loaders: { 
                        css: ExtractTextWebapckPlugin.extract({ use: 'css-loader' }) 
                    }
                }
            }
        ]
    },
    plugins:[
        new ExtractTextWebapckPlugin('style.css')
    ]
}

index.html引入css

<!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>webpack v4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>

//终端
npm build

打包完成后dist目录里面出现了main.js和style.css

处理图片

新建文件夹img,用来放图片

//app.vue
<template>
    <section class="main">
        <p>我来了{{name}}</p>
        <img src="../img/1.jpg" alt="">
    </section>
</template>

<script>
export default {
    data () {
        return {
            name:"vue + webpack"
        }
    }
}
</script>

<style>
.main>p{
    color: #000;
}
</style>

//终端
npm start

//报错
./src/img/1.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

基本可以看出来是图片有问题，没有loader处理图片

file-loader与url-loader

npm add file-loader url-loader

修改webpack.config.js

//webpack.config.js
...
rule:[
    ...
    { 
        test: /\.(png|jpg|gif)$/, 
        use: [{ loader: 'url-loader',options: { limit: 8192 } }] 
    }
    ...
]
...

npm start

打包成功...

webpack其余一些配置

resolve，watchOptions，devServer

//webpack.config.js
    resolve: {  //导入的时候不用写拓展名
        extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']
    },
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,//防止重复保存频繁重新编译,300ms内重复保存不打包
        poll: 1000  //每秒询问的文件变更的次数
    },
    devServer:{
        inline: true,
        compress: true,
        host: '127.0.0.1',
        port: 2500,
        historyApiFallback: true
    }

羲和生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始的 webpack4 + vue2.x

新建文件夹 webpack-vue安装依赖npm init //初始化package.jsonnpm add webpack webpack-cli //添加webpack、webpack-cli//ps:不知那个版本开始就需要安装webpack-cli了新建index.html// index.html&lt;!DOCTYPE html&gt;&lt;html...
复制链接

扫一扫