vue+webpack4.x从零搭建工程配置（一）

laoyuan 2019-05-15 标签：vue, webpack 阅读: 2,346

关于webpack搭建工程，很早之前也简单弄过，在此整理，存档简单记录一份。

一、初始化webpack项目

1、新建一个项目目录这里就叫webpack，然后cd webpack 用npm init初始化

2、安装webpack

npm i webpack --save-dev
npm i webpack-cli --save-dev

因为4.x的版本把cli分离出来了，所以必需安装webpack-cli，安装后，现在的package.json的代码如下

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "webpack+vue搭建工程配置项目测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "laoyuan",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}

3、新建工程目录和文件

在这里，先简单建好一些目录和文件，我们先在main.js随便写点东西

function test(){
     console.log("app")
}

项目如图所示

二、新建webpack.config.js配置文件

配置文件需要放在项目的根目录下，名字建议就叫webpack.config.js。

这里我们先简单配置一下

const path = require("path");

const config = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'my-bundle.js'
    }
}
module.exports = config;

配置的官方文档：https://www.webpackjs.com/concepts/configuration/

三、修改 package.json的配置

我们在webpack4 之前，写一个项目或者用vue-cli2.0，配置有两种类型的配置文件：

webpack.dev.conf.js 开发环境的
webpack.prod.conf.js 生产环境的
而 webpack4 的 mode 给出了两种配置：development 和 production。
所以我们把package.json 中的 scripts 修改为：

"scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production"
}

我们分别执行 npm run dev和npm run build，如图所示

我们从图中可以看出：npm run dev 打包的是未压缩的代码，而 npm run build 是压缩后的代码。

生产模式下：启用了代码压缩、作用域提升等各种优化
开发模式下：针对速度进行了优化

此时，我们项目里就多了一个dist目录，就是我们打包后的代码存放目录。如图所示，main.js的代码也已打包到my-bundle.js里了。

四、为项目安装babel、loader和相关的插件

1、安装babel 转换 ES6 代码

我们用babel转换ES6代码，需要安装一系列的依赖

npm i babel-core babel-loader babel-preset-env --save-dev

babel-core 作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。
babel-loader 用于将 ES6 及以上版本转译至 ES5

babel-preset-env 用于将 Javascript ES6 代码编译为 ES5

上面命令安装完成后版本

 "babel-core": "^6.26.3",
 "babel-loader": "^8.0.5",
 "babel-preset-env": "^1.7.0"

我们需使用 babel-polyfill 解决兼容性问题

npm i babel-polyfill babel-plugin-transform-runtime --save-dev

然后在我们的根目录下新建一个.babelrc文件，配置如下

{
     "presets": [
           "env"
      ],
      "plugins": [
           "transform-runtime"
      ]
 }

修改webpack.config.js配置为

const path = require("path");

const config = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'my-bundle.js'
    },
    module: {
    	rules:[
    		{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
    	]
    }
}
module.exports = config;

在执行npm run dev，发现报错了，只能改一下版本了。

npm i babel-loader@7 –save-dev

然后成功了。

当然我们也可以在webpack.config.js配置，修改为

{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
		loader: 'babel-loader',
		options: {
			presets: ['env'],
			plugins: ['transform-runtime']
		}
	}
}

这样我们来运行一下，npm run dev，如图所示：

参考文档：https://www.webpackjs.com/loaders/babel-loader/

2、安装处理样式资源的相关loader和依赖

这里选择的是less，sass, styus配置类似的，因为我们这里是vue项目，我们用vue-style-loader

npm i css-loader vue-style-loader less-loader --save-dev

文档：https://www.webpackjs.com/loaders/less-loader/

webpack.config.js中的配置如下

{
	test: /\.css$/,
	use: [
	  { loader: "vue-style-loader" },
	  { loader: "css-loader" }
	]
},
{
	test: /\.less$/,
	use: [
	  { loader: "vue-style-loader" },
	  { loader: "css-loader" },
	  { loader: "less-loader" }
	]
}

3、安装配置处理图片资源url-loader

npm i url-loader --save-dev

webpack.config.js中配置如下

{
	test: /\.(png|jpg||jpeg|gif)$/,
	use: [
		{
			loader: 'url-loader',
			options: {
			  limit: 1024,
			  name: '[name]-yuan.[ext]'
			}
		}
	]
}

4、css自动添加前缀，单独抽取css到独立文件

npm i postcss-loader mini-css-extract-plugin --save-dev

因为这里webpack4.0以上的版本，所以使用mini-css-extract-plugin

postcss-loader 用于添加浏览器前缀，在这里，我们是在根目录下，新建文件postcss.config.js，配置代码如下

module.exports = {
      plugins: {
           autoprefixer: {}
      }
}

在webpack.config.js里引入mini-css-extract-plugin模块，然后写入plugins

plugins: [
	new MiniCssExtractPlugin({
		filename: "[name].css",
		chunkFilename: "[id].css"
	})
]

到此，webpack.config.js代码如下：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
	entry: './src/main.js',
	output:{
		path: path.resolve(__dirname, './dist'),
		publicPath: '/dist/',
		filename: 'my-bundle.js'
	},
    module: {
    	rules:[
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
				    loader: 'babel-loader',
				    options: {
					    presets: ['env'],
					    plugins: ['transform-runtime']
				    }
				}
			},
			{
				test: /\.css$/,
				use: [
				  { loader: "vue-style-loader" },
				  { loader: "css-loader" }
				]
			},
			{
				test: /\.less$/,
				use: [
				  { loader: "vue-style-loader" },
				  { loader: "css-loader" },
				  { loader: "less-loader" }
				]
			}
    	]
    },
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		})
	]
}
module.exports = config;

5、复制并压缩html文件的相关插件html-webpack-plugin

html-webpack-plugin插件的作用是用来自动生成html页面，既可以生成单个页面又可以生成多个页面，并且在生成前你可以给它一堆的配置，它会按照你想要的生成方式去生成页面。

npm i html-webpack-plugin html-loader --save-dev

{
	test: /\.html$/,
	use: [{
		loader: "html-loader",
		options: {
			minimize: true
		}
	}]
}

在webpack.config.js加入如下代码：

const HtmlWebPackPlugin = require("html-webpack-plugin");
new HtmlWebPackPlugin({
	template: "./public/index.html",
	filename: "./index.html"
})

我们先在项目里新建一个public/index.html的目录和文件

执行npm run dev，如下：

6、打包前自动清空dist目录文件插件 clean-webpack-plugin

webpack.config.js增加如下代码即可：

const CleanWebpackPlugin = require('clean-webpack-plugin');
new CleanWebpackPlugin(['dist'])

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

const config = {
	entry: './src/main.js',
	output:{
		path: path.resolve(__dirname, './dist'),
		publicPath: '/dist/',
		filename: 'my-bundle.js'
	},
    module: {
    	rules:[
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
				    loader: 'babel-loader',
				    options: {
					    presets: ['env'],
					    plugins: ['transform-runtime']
				    }
				}
			},
			{
				test: /\.css$/,
				use: [
				  { loader: "vue-style-loader" },
				  { loader: "css-loader" }
				]
			},
			{
				test: /\.less$/,
				use: [
				  { loader: "vue-style-loader" },
				  { loader: "css-loader" },
				  { loader: "less-loader" }
				]
			},
			{
                test: /\.html$/,
                use: [{
                    loader: "html-loader",
                    options: {
                        minimize: true
                    }
                }]
            }
    	]
    },
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		}),
		new HtmlWebPackPlugin({
			template: "./public/index.html",
			filename: "./index.html"
		}),
		new CleanWebpackPlugin(['dist'])
	]
}
module.exports = config;

继续内容请查看：vue+webpack4.x从零搭建工程配置（二）

本文为原创文章，欢迎大家非商业转载，转载时请注明出处, 如有错误，欢迎指正（因无评论功能，可加Q群指正），谢谢！

出处格式：前端吧http://www.qianduan8.com/1610.html

上一篇：如何在Centos7服务器上部署node项目和nginx下部署前端vue项目? 下一篇：vue+webpack4.x从零搭建工程配置（二）



vue+webpack4.x从零搭建工程配置（一）

热门榜单

热点标签

文章存档

关于前端吧

关注交流