webpack4搭建vue开发环境

最新推荐文章于 2023-02-15 20:22:44 发布

原创最新推荐文章于 2023-02-15 20:22:44 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

8 篇文章

订阅专栏

html

4 篇文章

订阅专栏

一、项目基础文件

新建src、config、public文件夹，index.html、index.js文件

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack4学习笔记</title>
</head>
<body>
</body>
</html>

2、index.js

function sum(x, y) {
  return x + y;
}
console.log(sum(1, 2));

二、配置开发环境

1、装包（注意版本）

npm i webpack@4 webpack-cli@3 html-webpack-plugin@4 -D

2、配置入口、出口和应用HTML模板

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(p) {
  return path.resolve(__dirname, p);
}

module.exports = {
  mode: 'development',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: resolve('../dist'),
    filename: 'js/build.js'
  },
  plugins: [
    // 应用HTML模板
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

3、修改启动命令

"scripts": {
    "build": "webpack --config ./config/webpack.dev.config.js"
  }

4、初次打包：npm run build

运行HTML文件，控制台成功打印3
在这里插入图片描述

5、处理样式资源

5.1、npm i style-loader css-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

5.2、新建src/index.css文件

html,
body {
  height: 100%;
  background-color: yellowgreen;
}

5.3、在index.js中引入css文件

import './index.css';

function sum(x, y) {
  return x + y;
}
console.log(sum(1, 2));

5.4、npm run build，查看build.js，样式文件成功引入
在这里插入图片描述
5.4、使用less
npm i less less-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ],
  },
};

5.5、使用sass
npm i sass sass-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ],
  },
};

5.6、最终代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(p) {
  return path.resolve(__dirname, p);
}

module.exports = {
  mode: 'development',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: resolve('../dist'),
    filename: 'js/build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
    ],
  },
  plugins: [
    // 应用HTML模板
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

6、处理图片资源

6.1、处理css中的图片资源
npm i file-loader url-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 小于8k转为base64格式，大于8k用file-loader处理
              limit: 8192,
              name: 'assets/images/[name]_[hash:6].[ext]'
            },
          },
        ],
      },
    ],
  },
};

6.2、处理html中img标签的图片
npm i html-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
};

6.3、最终代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(p) {
  return path.resolve(__dirname, p);
}

module.exports = {
  mode: 'development',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: resolve('../dist'),
    filename: 'js/build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 小于8k转为base64格式，大于8k用file-loader处理
              limit: 8192,
              name: 'assets/images/[name]_[hash:6].[ext]'
            },
          },
        ],
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
  plugins: [
    // 应用HTML模板
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

7、配置开发服务器

npm i webpack-dev-server -D
添加启动命令

module.exports = {
  //...
 devServer: {
    // 资源路径
    contentBase: resolve('../dist'),
    // 启动gzip压缩
    compress: true,
    hot: true,
    open: true,
    port: 9000,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  }
};

8、安装vue

添加别名

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

8.1 装包
npm i vue vue-router -S
npm i vue-loader vue-template-compiler vue-style-loader -D
8.2 src/index.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

8.3 src/App.vue

<template>
  <router-view></router-view>
</template>

<script>
  export default {
    name: 'App',
    components: {

    }
  };
</script>

<style lang="css">
  html,
  body,
  #app {
    height: 100%;
    overflow: hidden;
  }
</style>

8.4 src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
import routes from './routes';

export default new Router({
  mode: 'hash',
  routes
})

8.5 src/router/routes.js

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    name: 'Home',
    path: '/home',
    component: () => import(/* webpackChunkName: "home" */ '../pages/home/index.vue')
  }
]

export default routes;

8.6 src/pages/home/index.vue

<template>
  <div class="home">
    这是首页
    <div class="content"></div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
}
</style>

9、webpack.dev.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

function resolve(p) {
  return path.resolve(__dirname, p);
}

module.exports = {
  mode: 'development',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: resolve('../dist'),
    filename: 'js/build.js'
  },
  devServer: {
    // 资源路径
    contentBase: resolve('../dist'),
    // 启动gzip压缩
    compress: true,
    hot: true,
    open: false,
    port: 9000,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/i,
        loader: 'vue-loader',
        options: {
          css: [
            'vue-style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        include: /src/
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        include: /src/
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
        include: /src/
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: /src/
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 小于8k转为base64格式，大于8k用file-loader处理
              limit: 8192,
              name: 'assets/images/[name]_[hash:6].[ext]'
            },
          },
        ],
        include: /src/
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
        include: /src/
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/media/[name]_[hash:6].[ext]'
            }
          },
        ],
        include: /src/
      },
    ],
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    // 应用HTML模板
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}