1,配置webpack
参考官网的例子webpack官网
index.js
import bar from './bar';
bar();
src/bar.js
export default function bar() {
console.log('我来自bar.js')
}
webpack.config.js
没有的话在项目根目录下面新建
const path = require('path');
//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
module.exports = {
entry: './src/index.js',//入口
output: {//输出
path: path.resolve(__dirname, 'dist'),//输出的路径
filename: 'bundle.js'//输出的文件名
}
};
参考node.js path.resolve
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>不要脚手架</title>
</head>
<body>
<h1>hello world</h1>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
在终端中输入(前提是你全局安装过webpack了）
webpack
image.png
image.png
在webpack后面加上--mode devlopment或者production
参考：webpack mode
增加webpack-dev-server
//终端
npm install webpack webpack-dev-server webpack-cli -D
配置package.json
"dev":"webpack-dev-server --mode development --open",
"start": "npm run clear && webpack --mode development && npm run dev",
"build": "webpack --mode production",
"clear": "rimraf dist"
clear:清空dist
webpack-dev-server:开启一个本地服务器
//终端
npm run start
现在可以在可以看到项目在浏览器上运行了
2，配置vue
2.1安装vue
npm i vue
在src目录下面新建app.vue文件
//app.vue
<template>
<section class="home">
<p>我来了{{name}}</p>
<Home></Home>
</section>
</template>
<script>
import Home from './home.vue'
export default {
data () {
return {
name:"vue + webpack"
}
},
components: {
Home
}
}
</script>
<style>
.home>p{
background: yellow;
}
</style>
//home.vue
<template>
<section class="home">
<p>我是{{name}}</p>
</section>
</template>
<script>
export default {
data () {
return {
name:"home.vue"
}
}
}
</script>
<style>
.home>p{
background: red;
}
</style>
修改index.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el:"#root",
render:h=>h(App)
})
执行npm run start
image.png
建议我可能需要loader来处理xxx.vue的文件
参考：webpack-概念
image.png
安装vue-loader,配置
//webpack.config.js
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[
{test:/\.vue$/,use:'vue-loader'}
]
}
}
跑起来依次安装提示缺少得东西
vue-template-compiler(编译vue)
css-loader(解析vue里面的style)
//配置loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
}
image.png
现在vue能编译了,怕样式覆盖可以直接加scoped
3,js和css分离
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
// make sure to include the plugin!
new ExtractTextPlugin('style.css'),
new VueLoaderPlugin()
]
}
可以看到dist目录下面已经有style.css了
image.png
//index.html
<link rel="stylesheet" href="style.css">
处理图片等其他静态资源
npm install file-loader url-loader
//webpack.config.js
{
test: /\.(png|jpg|gif)$/,
use: [{ loader: 'url-loader',options: { limit: 8192 } }]
}
运行项目
其他配置
resolve: { //导入的时候不用写拓展名
extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']
},
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,//防止重复保存频繁重新编译,300ms内重复保存不打包
poll: 1000 //每秒询问的文件变更的次数
},
devServer:{
inline: true,
compress: true,
host: '127.0.0.1',
port: 2500,
historyApiFallback: true
}
webpack.config.js完整配置
const path=require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack=require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|gif)$/,
use: [{ loader: 'url-loader',options: { limit: 8192 } }]
}
]
},
plugins: [
// make sure to include the plugin!
new ExtractTextPlugin('style.css'),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin({
// Options...
})
],
resolve: { //导入的时候不用写拓展名
extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']
},
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,//防止重复保存频繁重新编译,300ms内重复保存不打包
poll: 1000 //每秒询问的文件变更的次数
},
devServer:{
inline: true,
compress: true,
host: '127.0.0.1',
port: 2500,
historyApiFallback: true,
hot:true
}
}
网友评论