早晨看一篇博客学习了nodejs for window的安装,和npm的安装。
codecasts论坛jellybool录制的webpack视频1-3。
loader的另一种写法
修改entry.js为
但不方便,不建议。
使用webpack进行vue组件式开发
目录结构
npm install vue vue-loader vue-html-loader vue-style-loader --save-dev
npm install vue-template-compiler -D
- webpack.config.json
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
devtool: "sourcemap",
entry: "./js/entry.js",
output: {
filename:"bundle.js"
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test:/\.css$/,
use:
[
{loader:'style-loader'},
{loader:'css-loader'}
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
},
{
test:/\.vue$/,
use:{
loader: 'vue-loader',
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
entry.js
require('./module-one.js');
require('./module-two.js');
import Vue from 'vue';
import Heading from './components/heading.vue';
new Vue({
el:'#app',
components:{
Heading
}
})
require('../css/style.css');
heading.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg:'hello vue'
}
}
};
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack learning</title>
</head>
<body>
<div id="app">
<Heading></Heading>
</div>
<h1>webpack is nice</h1>
<div class="css-loader">123</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
以下和vue没有直接关系也贴出来
style.css
.css-loader {
background-color: green;
}
module-one.js
import $ from 'jquery';
$('h1').html('aaaa');
module-two.js
console.log('module Two');
package.json
{
"name": "jellybool-webpack",
"version": "1.0.0",
"description": "first object",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "yt",
"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.5",
"css-loader": "^2.1.1",
"jquery": "^3.4.1",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.31.0"
}
}
页面