此配置為自己動手的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=production 設定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')
}
}
}
複製程式碼設定NODE_ENV環境也可以借鑑以下網頁文章 webpack4.0 npm script 使用 --mode development 設定開發模式和生產模式
第二步 簡單啟動編譯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_01