Webpack-创建项目1

      2021年05月14日 星期五 17:02:14     webpack      webpack    

1.Hbuilder中创建项目,项目名我定义为”webpackdemo”

创建项目-webpackdemo文件夹

2.安装包,前提是node环境已经搭建完成;

2-1项目初始化

npm init

webpack项目初始化-packagejson文件

2-2安装webpack包

npm install –save-dev webpack

npm install –save-dev webpack-cli@3

安装webpack包

3.新建如图文件,不存在的自行创建

新建文件-图片已失效
项目结构

4.配置webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

var config = {
        //入口配置
	entry: {
		main: './main'
	},
        //出口配置
	output: {
		path: path.join(__dirname, './dist'),
		publicPath: '/dist',
		filename: 'main.js'
	},
        //用到的模型[引入css,js,vue...,需要在这里配置
	module:{
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader','css-loader']
			},
			{ test: /\.vue$/, use: 'vue-loader' }
		]
	},
        //要使用vue.js必须的设置,如果不设置,webpack使用的vuejs将会是运行时的vuejs[其位于\node_modules\vue\dist\vue.runtime.common.js],造成报错;
	resolve: {
		alias: {
			"vue$": "vue/dist/vue.js"
		}
	},
        //要使用vue.js必须的设置
	    plugins: [ 
	        new VueLoaderPlugin(),
	      ],
};

module.exports = config;

因为我需要创建一个简单的vue项目,需要引入css,vue,所以需要在config.module设置规则,test是一个正则,这里表示匹配后缀为css的文件[待会会在main.js中通过import引入];use是需要用到的包;

rules: [
{
	test: /\.css$/,
	use: ['style-loader','css-loader']
},
{ test: /\.vue$/, use: 'vue-loader' }
]

接下来安装该vue项目需要的包也是该步骤需要的,分别是style-loader,css-loader,vue-loader,vue-loader,vue-template-compiler

5.配置main.js

import "./index.css"
 //引入css
import Vue from 'vue'
 //引入vue

import bbb from '/components/bbb.vue'
 //[额外]引入组件,可以不引入,这里只是我测试用

var vm = new Vue({
	el: '#app',
	data: {
		msg: '123666'
	},
	  components:{
	    bbb
	  }
})

6.配置indexcss

#app{
	color: red;
}

7.配置index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">99{{msg}}<bbb></bbb></div>
		<script src="/dist/main.js"></script>
	</body>
</html>

8.配置packagejson

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^5.2.4",
    "style-loader": "^2.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.37.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  //这里要加,避免运行太麻烦
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

9.最后npm run dev


暂无评论

发表评论