webpack使用
2019-05-15 本文已影响0人
Wo信你个鬼
各位大老们好，可能写的不够完美，欢迎各位大老在评论下留言。。。
webpack的官网：
全局安装 webpack 、webpack-cli 、webpack-dev-server
cnpm i webpack webpack-cli webpack-dev-server -g
查看版本
webpack -v
生成package.json
npm init
默认所有
npm init -y
创建项目目录
新建目录src dist目录
在src中新建index.js
在dist中新建index.html
打包
webpack
修改打包命令，最后执行命令npm run serve
注：mode：表示命令是生产还是开发命令
production生产模式
development 开发模式
微信图片_20190515114030.png
前端自己手动配置webpack
--------------------------------1.修改配置文件--------------------------------------
修改配置文件webpack.config.js
//引入相关配置
const path = require('path');
module.exports = {
//入口文件
entry:{
main:"./src/main.js",
index:"./src/index.js"
},
//多个出口文件
output:{
path:path.resolve(__dirname,'../dist'),
filename:"[name].js"//打包的文件名字
}
}
修改配置文件package.json
{
"name": "2019-05-15-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//打包
"serve": "webpack --config=config/webpack.config.js --mode=production"
},
"author": "",
"license": "ISC"
}
执行命令npm run server
---------------------------------------2.配置本地-------------------------------------
配置本地webpack.config.js
//引入相关配置
const path = require('path');
module.exports = {
//入口文件
entry:{
main:"./src/main.js",
index:"./src/index.js"
},
//多个出口文件
output:{
path:path.resolve(__dirname,'../dist'),
filename:"[name].js"//打包的文件名字
},
//------------------------------此次是配置本地--------------------------------------------
//配置本地
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'../dist'),
//设置服务ip地址
host:"localhost",
//服务压缩是否开启
compress:true,
//配置服务端口号
port:8080
}
}
package.json
{
"name": "2019-05-15-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//本地
"start":"webpack-dev-server --config=config/webpack.config.js --mode=development",
//打包
"serve": "webpack --config=config/webpack.config.js --mode=production"
},
"author": "",
"license": "ISC"
}
执行命令npm run start
-------------------------------------3.配置本地自动更新安装-------------------------
配置本地自动更新安装
npm install webpack --save-dev
webpack.config.js
//引入相关配置
const path = require('path');
const webpack = require('webpack');
module.exports = {
//入口文件
entry:{
main:"./src/main.js",
index:"./src/index.js"
},
//多个出口文件
output:{
path:path.resolve(__dirname,'../dist'),
filename:"[name].js"//打包的文件名字
},
//------------------------------此次是更新--------------------------------------------
plugins:[
//更新
new webpack.HotModuleReplacementPlugin()
],
//配置本地
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'../dist'),
//设置服务ip地址
host:"localhost",
//更新
inline:true,
//服务压缩是否开启
compress:true,
//配置服务端口号
port:8080
}
}
package.json
{
"name": "2019-05-15-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//本地
"start": "webpack-dev-server --config=config/webpack.config.js --mode=development",
//打包
"serve": "webpack --config=config/webpack.config.js --mode=production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0"
}
}
执行命令npm run start
-------------------------------------4.打包HTML----------------------------------
打包HTML
安装打包HTML
npm install html-webpack-plugin --save-dev
webpack.config.js
//引入相关配置
const path = require('path');
const webpack = require('webpack');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
//入口文件
entry:{
main:"./src/main.js",
index:"./src/index.js"
},
//多个出口文件
output:{
path:path.resolve(__dirname,'../dist'),
filename:"[name].js"//打包的文件名字
},
plugins:[
//更新
new webpack.HotModuleReplacementPlugin(),
//------------------------------此次是HTML--------------------------------------------
//html
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:"./src/index.html"
})
],
//配置本地
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'../src'),
//监听热更新src文件
watchContentBase:true,
//设置服务ip地址
host:"localhost",
//更新
hot:true,
inline:true,
//服务压缩是否开启
compress:true,
//配置服务端口号
port:8080
}
}
package.json
{
"name": "2019-05-15-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//本地
"start": "webpack-dev-server --config=config/webpack.config.js --mode=development --open",
//打包
"serve": "webpack --config=config/webpack.config.js --mode=production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0"
}
}
执行命令npm run server
热更新执行本地npm run start
----------------------------------5.打包css-----------------------------
打包css
安装css
npm install style-loader css-loader --save-dev
在index.js引入css
import css from './css/index.css'
webpack.config.js
//引入相关配置文件
const path = require('path');
const webpack = require('webpack');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
//入口文件
entry:{
main:"./src/main.js",
index:"./src/index.js"
},
//多个出口文件
output:{
path:path.resolve(__dirname,'../dist'),
filename:"[name].js"//打包的文件名字
},
//------------------------------此次是Css--------------------------------------------
//css
module:{
rules:[{
test:/\.css$/,
use:[
{loader:"style-loader"},
{loader:"css-loader"}
]
}]
},
plugins:[
//更新
new webpack.HotModuleReplacementPlugin(),
//html
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:"./src/index.html"
})
],
//配置本地
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'../src'),
//监听更新src文件
watchContentBase:true,
//设置服务ip地址
host:"localhost",
//更新
hot:true,
inline:true,
//服务压缩是否开启
compress:true,
//配置服务端口号
port:8080
}
}
package.json
{
"name": "2019-05-15-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
//本地
"start": "webpack-dev-server --config=config/webpack.config.js --mode=development --open",
//打包
"serve": "webpack --config=config/webpack.config.js --mode=production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0"
}
}
执行命令npm run serve
结构目录如下：
微信图片_20190515175750.png
--------------------------------------------打包vue-------------------------------------------
打包vue
安装
1.安装package.json
npm init -y
-y 代表默认
2.安装vue
npm install vue vue-loader --save-dev
3安装模板
npm i vue-template-compiler --save-dev
4.安装HTML
npm i html-webpack-plugin --save-dev
5.安装css，sass
npm i css-loader node-sass style-loader sass-loader vue-style-loader -D
-D == --save-dev
6.安装图片压缩
npm install imagemin-webpack-plugin --save-dev
7.安装glob
npm install glob --save-dev
App.vue
<template>
<div id="app">
<h1 class="title">{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello world"
}
}
}
</script>
<style lang="scss" scoped>
#app {
.title {
color: red;
}
}
</style>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
//入口文件
import vue from "vue";
import App from "./App.vue";
new vue({
el:"#app",
render:h=>h(App)
})
webpack.config.js
//引入相关配置文件
const vuePlugin = require("vue-loader/lib/plugin");
const htmlPlugin = require('html-webpack-plugin');
const imgPlugin = require('imagemin-webpack-plugin').default;
const glob = require("glob")
module.exports = {
mode: "production",
module: {
rules: [{//vue
test: /\.vue$/,
loader: "vue-loader"
}, {//css
test: /\.css$/,
use: [
"vue-style-loader",
"css-loader"
]
}, {//scss
test: /\.scss$/,
use: [
"vue-style-loader",
"css-loader",
"sass-loader"
]
}]
},
plugins: [
new vuePlugin(),
//html
new htmlPlugin({
minify: {
removeAttributeQuotes: true
},
hash: true,
template: "./src/index.html"
}),
//压缩图片
new imgPlugin({
externalImages: {
context: 'src', // Important! This tells the plugin where to "base" the paths at
sources: glob.sync('src/img/**/*.png'),
destination: 'dist',
fileName: '[path][name].[ext]' // (filePath) => filePath.replace('jpg', 'webp') is also possible
}
})
]
}
目录结构如下：
微信图片_20190515184740.png
