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官网
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Machine Learning
Kevin Murphy / The MIT Press / 2012-9-18 / USD 90.00
Today's Web-enabled deluge of electronic data calls for automated methods of data analysis. Machine learning provides these, developing methods that can automatically detect patterns in data and then ......一起来看看 《Machine Learning》 这本书的介绍吧!
