2019-5-11学习笔记webpack

最新推荐文章于 2022-05-31 09:38:51 发布

原创最新推荐文章于 2022-05-31 09:38:51 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

日记专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用Webpack进行Vue组件式开发，包括配置Webpack以支持Vue、CSS和JS加载，以及如何通过Vue-loader整合Vue单文件组件。同时，文章提供了完整的Webpack配置示例和Vue组件代码。

早晨看一篇博客学习了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"
  }
}

页面
在这里插入图片描述