webpack 簡單配置

簡單配置

 

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

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

//定義入口 出口文件

const PATH = {

app:path.join(__dirname,"../src/main.js"),

build:path.join(__dirname,"../dist")

}

module.exports = {

//定義配置環境

mode:"development",

//定義入口文件

entry:{

app:PATH.app

},

//出口文件

output:{

filename:"[name].js",

path:PATH.build

},

//使用插件

plugins:[

new HtmlWebpackPlugin({

//模板文件

template:"index.html",

//打包生成後的文件

filename:"index.html",

title:"Vue",

}),

new VueLoaderPlugin()

],

module:{

//打包規則

rules:[

//每一個對象都是一種打包規則

{

test:/\.vue$/,

loader:"vue-loader"

},

//解析js文件

{

test:/\.js$/,

use:{

loader:"babel-loader",

options:{

//es6轉換es5

presets:["@babel/env"]

}

}

},

//對css處理

{

test:/\.(css|scss)$/,

use:["style-loader","css-loader","sass-loader"],

},

]

},

//配置服務器

devServer:{

open:true,

port:9000,

proxy:{

"/ajax":{

target:"路徑",

changeOrigin:true

}

}

},

}

 

安裝webpack

一、初始化項目
npm init -y
二、安裝webpack
cnpm install webpack webpack-cli -D
三、建立src文件夾 在src中建立入口文件 main.js
四、建立config文件 建立base.config.js文件
六、初始打包
npx webpack
npx 只在node_modules文件中找

七、安裝html插件
cnpm install html-webpack-plugin -S

七、安裝解析JS的babel文件
cnpm install -D @babel/core babel-loader @babel/preset-env

八、安裝解析CSS的loader文件
cnpm install -D style-loader css-loader sass-loader node-sass

九、
十、安裝處理圖片的loader
cnpm install url-loader file-loader -D

11 、安裝處理vue的文件loader
cnpm install -D vue-loader vue-template-compiler

十二、安裝vue.js
cnpm install vue -S

1三、安裝服務器環境
cnpm install webpack-dev-server -D

 

 

一次性安裝   7-10

cnpm install babel-loader @babel/core @babel/preset-env style-loader css-loader sass-loader node-sass url-loader file-loader html-webpack-plugin webpack-dev-server -D