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

1、初始化项目
npm init -y
2、安装webpack
cnpm install webpack webpack-cli -D
3、创建src文件夹 在src中创建入口文件 main.js
4、创建config文件 创建base.config.js文件
6、初始打包
npx webpack
npx 只在node_modules文件中找

7、安装html插件
cnpm install html-webpack-plugin -S

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

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

9、
10、安装处理图片的loader
cnpm install url-loader file-loader -D

11 、安装处理vue的文件loader
cnpm install -D vue-loader vue-template-compiler

12、安装vue.js
cnpm install vue -S

13、安装服务器环境
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