如何用webpack4带你实现一个vue的打包的项目

下面是如何用webpack4带你实现一个vue的打包的项目的完整攻略。

一、安装和配置webpack

首先安装webpack和webpack-cli依赖：

npm install webpack webpack-cli --save-dev

然后在项目根目录下创建webpack.config.js文件，并写入如下配置：

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

这里配置了一个入口文件为src/main.js，输出文件名为bundle.js，输出路径为dist目录。

你也可以通过命令行直接指定配置文件，如：

npx webpack --config webpack.config.js

二、安装和配置vue-loader

vue的单文件组件需要使用vue-loader插件来处理，先安装依赖：

npm install vue-loader vue-template-compiler --save-dev

然后在webpack.config.js文件中添加如下配置：

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

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

这里配置了一个用于处理vue文件的rule规则，使用vue-loader来进行处理。

三、安装和配置babel-loader

如果你需要编译es6代码，可以使用babel-loader来处理，先安装依赖：

npm install babel-loader @babel/core @babel/preset-env --save-dev

然后在webpack.config.js文件中添加如下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

这里配置了一个用于处理js文件的rule规则，使用babel-loader来进行处理。

四、安装和配置css和sass处理器

对于样式文件，我们需要使用css-loader、style-loader和sass-loader来进行处理。先安装依赖：

npm install css-loader style-loader sass-loader node-sass --save-dev

然后在webpack.config.js文件中添加如下配置：

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

这里配置了两个用于处理css和sass文件的rule规则。

五、完整的webpack配置

最终的webpack.config.js文件如下所示：

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

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

六、实例演示

以下是一个基于webpack4的vue项目演示：

1、创建项目

首先创建一个新的目录，然后初始化npm：

mkdir webpack-vue-demo
cd webpack-vue-demo
npm init -y

2、安装依赖

然后安装依赖：

npm install webpack webpack-cli vue vue-loader vue-template-compiler babel-loader @babel/core @babel/preset-env css-loader style-loader sass-loader node-sass --save-dev

3、创建文件

├── src
│   ├── App.vue
│   ├── main.js
│   └── style.scss
├── dist
│   └── index.html
└── webpack.config.js

其中，App.vue文件内容如下：

<template>
  <div class="hello">{{msg}}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, Vue world!'
    };
  }
};
</script>

<style lang="scss">
.hello {
  color: blue;
  font-size: 2rem;
}
</style>

style.scss文件内容如下：

$color: #f00;

.hello {
  color: $color;
  font-size: 2rem;
}

main.js文件内容如下：

import Vue from 'vue';
import App from './App.vue';
import './style.scss';

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

index.html文件内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack Vue Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

webpack.config.js文件内容如下：

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

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

4、运行项目

最后，在命令行中运行npm run build打包项目，在浏览器中打开dist/index.html文件即可看到效果。

如果需要实时预览，可以使用webpack-dev-server，先安装依赖：

npm install webpack-dev-server --save-dev

然后在package.json中添加如下scripts：

"scripts": {
  "start": "webpack-dev-server --open"
}

接着在命令行中运行npm start即可预览项目。

以上就是如何用webpack4带你实现一个vue的打包的项目的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何用webpack4带你实现一个vue的打包的项目 - Python技术站

如何用webpack4带你实现一个vue的打包的项目

一、安装和配置webpack

二、安装和配置vue-loader

三、安装和配置babel-loader

四、安装和配置css和sass处理器

五、完整的webpack配置

六、实例演示

相关文章