webpack踩坑记录
栏目: JavaScript · 发布时间: 6年前
内容简介：目前最的正式版本是：4.31.0，推荐使用本地安装，附上源代码webpack.config.js
webpack入门级配置（最新）
目前最的正式版本是：4.31.0，推荐使用本地安装， webpack官网-指南
1.初始化
node -v mkdir demo npm init -y
const path = require('path');
module.exports = {
entry:'./src/index.js'.
ouyput:{
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
}
}
安装 webpack-dev-server
npm i webpack-dev-server -D "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" npm run dev
安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[new HtmlWebpackPlugin({template:'./dist/index.html'})]
加载css
npm install --save-dev style-loader css-loader
module:{reules:[{test:/\.css$/,use:['style-loader','css-loader']}]}
安装babel-loader
npm install -D babel-loader @babel/core @babel/preset-env webpack
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
npm install -D @babel/plugin-transform-runtime
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
使用vue
npm i vue -D
# const VueLoaderPlugin = require('vue-loader/lib/plugin');
# resolve:{
alias:{
'vue$':"vue/dist/vue.esm.js"
}
}
安装vue-loader
npm install -D vue-loader vue-template-compiler
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
- rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
- plugins: [
// 引入这个插件！
new VueLoaderPlugin()
]
附上源代码
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
],
module:{
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test:/\.(png|svg|ipg|gif)$/,
use:['file-loader']
},
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
},
]
},
resolve:{
alias:{
'vue$':"vue/dist/vue.esm.js"
}
}
}
package.json
{
"name": "mint-demo",
"version": "1.0.0",
"description": "\"",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"vue": "^2.6.10"
}
}
index.js
import Vue from 'vue';
import App from './App.vue';
console.log('444');
var app = new Vue({
el:'#app',
data:{
msg:'ccc'
},
render: c => c(App)
})
console.log('2323');
index.html
<!DOCTYPE html>
<html lang="en">
<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>vue</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
</html>
App.vue
<template>
<div>
这是app.vue
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
欢迎指正哦！
参照：
vue官网
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
