此配置为自己动手的webpack 4.x简单配置，高手绕过，入门者共同学习！不懂处可自行百度或者留言
坑：全局webpack版本为3.x, 而项目为4.x
建议安装项目局部的webpack版本
npm i -D webpack webpack-cli
初始化 package.json
npm init -y 或 npm init
生成一下package.json文件
{
"name": "demo_03",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
第一步 设置package.json的编译字段
一般来说有两种 npm run dev 和 npm run build
webpack添加了两个方便的点 --mode 和 --env.NODE_ENV
- mode 两种方式
- --mode development 开发模式，编译后的js不压缩
- --mode production 生产模式，编译后的js压缩
- --env.NODE_DEV 设置环境模式
- --env.NODE_ENV=development 设置环境为development开发模式
- --env.NODE_ENV=production 设置环境为production生产模式
webpack // 不设置mode的情况下 打包出来的文件自动压缩
webpack --mode development // 设置mode为开发模式，打包后的文件不被压缩
webpack --mode production // 设置mode为生成环境，打包后的文件压缩
webpack --env.NODE_ENV=development 设置process.env.NODE_ENV为开发环境
webpack --env.NODE_ENV=development 设置process.env.NODE_ENV为生产环境
package.json中的script
"scripts": {
"dev": "webpack --mode development --env.NODE_ENV=development",
"build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
},
在webpack.config.js中如何获取呢?
const path = require('path');
module.exports = env => {
// Use env.<YOUR VARIABLE> here:
console.log('NODE_ENV: ', env.NODE_ENV) // 'production' 根据此处判断环境
console.log('Production: ', env.production) // ture
return {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
}
}
第二步 简单启动编译vue项目文件
肯定就安装vue相关的vue的npm包 vue vue-loader
注意：控制台会提醒安装css-loader 和 vue-template-compiler
不要吝啬，也一并安装了吧
npm i -D vue vue-loader
在项目文件里新建个webpack.config.js文件
代码如下
const configFun = (env)=> {
return {
entry: path.join(__dirname, 'src/main.js'),
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
module: {
rules:[{
test: /\.vue$/,
loader:'vue-loader'
}]
}
},
}
module.exports = (env)=> {
let config = configFun(env)
return config;
}
项目文件中新建src文件，在src文件中新建app.js和main.js
代码如下：
//main.js
import Vue from 'vue'
import App from './app.vue'
let root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render: (h)=> h(App)
}).$mount(root)
// app.vue
<template>
<div class="test">{{text}}</div>
</template>
<script>
export default {
data(){
return {
text:'hello webpack111!！！'
}
}
}
</script>
<style>
.text{
color: #999;
}
</style>
第三步添加其他模块的编译
js的ES6化，css和图片
npm i -D babel-core babel-loader babel-preset-es2015 style-loader url-loader file-loader
- 疑问1、如果不明白babel-core babel-loader babel-preset-es2015的区别和联系可以点击查看一下👇大神的文章
babel-loader、babel-core、babel-preset-env的区别和联系
- 疑问2、url-loader file-loader的关系
url-loader对未设置或者小于limit设置的图片进行转换，以base64的格式被img的src所使用；而对于大于limit byte的图片用file-loader进行解析。
在webpack.config.js配置好module，代码如下
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(gif|jpg|jpeg|svg)/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[hash:6].[ext]'
}
},
]
}
]
},
在项目文件下新建.babelrc文件，代码如下
{
"presets": ["es2015"]
}
es2015根据你下载的npm的
babel-preset-es2015包不同来决定的； 如果是babel-preset-env，那就是"presets": ["env"]
第四步 生成html模块
到现在为止项目中没有html文件，作为前端项目最为基本的，webpack为我们提供了html-webpack-plugin的包，可以运用此包生成html文件
npm i -D html-webpack-plugin
在webpack.config.js文件中如下
const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new htmlWebpackPlugin()
]
html-webpack-plugin配置属性
- title 生成html文件的标题
- filename 就是html文件的文件名，默认是index.html
- template 依照的模板 html ejs ejs
- inject inject有四个值： true body head false
- true 默认值，script标签位于html文件的 body 底部
- body script标签位于html文件的 body 底部
- head script标签位于html文件的 head中
- false 不插入生成的js文件，这个几乎不会用到的
- favicon 给你生成的html文件生成一个 favicon ,值是一个路径
- minify 使用minify会对生成的html文件进行压缩。默认是false
- cache 默认是true的，表示内容变化的时候生成一个新的文件。
- showErrors 当webpack报错的时候，会把错误信息包裹再一个pre中，默认是true。
- chunks chunks主要用于多入口文件[name]
- excludeChunks 排除掉一些js
- xhtml 一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。
- chunksSortMode script的顺序，默认四个选项： none auto dependency {function}
在此不做html-webpack-plugin过多的讲解，推荐一篇文章查看
第五步 webpack-dev-server
webpack-dev-server用于开发者在开发中配置使用的
webpack官网有详细的说明，开发中 Server(devServer)
根据上面的webpack.config.js的代码，添加以下代码
const devConfigFun = (argument)=> {
argument.devtool = '#cheap-module-eval-source-map';
argument.devServer = {
port: '8000',
host: '0.0.0.0',
overlay: {
errors: true
},
open: true,
hot: true
}
argument.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
return argument;
}
module.exports = (env)=> {
let config = configFun(env)
if (env.NODE_ENV === 'development') {
config = devConfigFun(config)
}
return config
};
NODE_ENV设置成其他文件可以访问
在原来的代码基础上添加
任意js文件或者vue文件都可以获取
// src/main.js
console.log(process.env.NODE_ENV) // development
// src/app.vue
mounted() {
console.log(process.env.NODE_ENV) // development
}
const configFun = (env)=> {
return {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: env.NODE_ENV === 'development' ? '"development"' : '"production"' // 这里是双冒号
}
}),
]
}
}
将package.json的script修改一番
"scripts": {
"dev": "webpack-dev-server --mode development --env.NODE_ENV=development",
"build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
},
控制台 npm run dev
自动打开默认浏览器，默认8000端口
控制台 npm run build
编译在src的dist的文件中(包含index.htm和index.js)
webpack 4.x + Vue最基础配置，保证能启动和编译，距离vue-cli的webpack模式还差得远，但在不断学习和完善，也会不断更新...敬请期待
日后也会更新parcel + vue的配置文档
parcel官网
本项目的代码在GitHub的demo_02
