这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录
安装依赖，用到的依赖比较多
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader@7
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
npm install --save babel-polyfill
因为我们安装的 babel 是 6.x 版本，而它所对应的 babel-loaderl 版本必须是 7.x，所以在命令行中，我们明确指定了版本号。如果版本不对应，就会抛出 Cannot find module '@babel/core' 错误。
webpack.config.js配置
综合前面的几节内容，我们配置的webpack.config.js如下所示
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'js/[name]-[hash].js',//打包出的脚本文件全部放进dist下的js目录
path: path.resolve(__dirname, 'dist'),
publicPath: '/',//使用绝对路径
},
module: {
rules: [{ //vue 解析
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: { //开发环境使用style-loader打包
css: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
scss: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader, 'sass-loader']
}
}
}, { //js 解析
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}, {
test: /\.css$/,
//开发环境使用style-loader打包
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
}, {
test: /\.scss$/,
//开发环境使用style-loader打包
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name]-[hash].[ext]',//所有图片放进images目录
}
}]
}]
},
plugins: [
new HtmlWebpackPlugin({
title: 'myWebpack',
filename: 'index.html',
template: './public/index.html'
}),
new MiniCssExtractPlugin({
filename: "[name]-[hash].css",//所有抽离出的样式文件，放进css目录
chunkFilename: "vue-[name]-[hash].css"
}),
new VueLoaderPlugin()
],
};
配置babel
babel 是新一代 JavaScript 语法的编译器 。 可以让我们放心地使用大部分 JavaScript 新的标准语法，代码会通过编译，生成兼容绝大多数主流浏览器的代码 。 在项目工程脚手架中，一般会使用 .babelrc 文件，来配置一些基本参数，配合 webpack 进行打包压缩 。
在项目根目录，创建 .babelrc 文件，内容如下：
{
"presets": [
"es2015"
],
"plugins": [
"transform-runtime"
],
"comments": false
}
属性说明
presets 指定预设转码器；babel6 有这些值可选：es2015 ,stage-0 , stage-1 ,stage-2 , stage-3 ,react。
plugins 插件。这里安装了 transform-runtime 插件。
comments 在生成的文件中，是否带注释。
之所以使用了 transform-runtime 插件，是因为 babel 在转换 ES2015 语法为 ECMAScript 5 的语法时，它需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文当件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 插件来将这些辅助函数 “搬” 到一个单独的模块 babel-runtime 中，通过这种方式就能有效地减少项目文件。
编写 App.vue 文件
在根目录下的src目录中，新建一个 App.vue
<template>
<div>您好，{{name}}</div>
</template>
<script>
export default {
data() {
return {
name: '柴可夫拖拉斯基'
}
}
}
</script>
<style scoped>
div {
color: #3399ff;
font-size: 18px;
}
</style>
在main.js中引用 App.vue 组件
// 引入babel-polyfill
import 'babel-polyfill'
// 引入 Vue 框架
import Vue from 'vue'
//引入 App.vue 组件
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
查看效果
执行npm run build 打包生产代码到dist目录，然后启动一个web服务器（如果你不了解如何启动一个web服务器，没关系，学习到下面的dev-server章节一样可以运行查看效果），将dist目录下的资源放到服务器的根目录下，然后访问服务器就可以查看到运行效果如下
image
网友评论