webpack+手工搭建vue开发环境配置(二)

webpack开发环境配置步骤

ps: 手动搭建vue, 配置开发环境webpack

• 搭建项目目录结构
• 安装 & 配置
• html-webpack-plugin生成index.html

webpack

1. 项目目录结构

 |-src
 	 |-main.js 项目打包的入口文件
 	 |-App.vue 项目的根组件，项目一启动看到的第一个页面的内容，就写在这里
 |-package.json 使用 npm init -y
 |-webpack.config.dev.js 开发阶段的webpack配置文件

2. 在 App.vue、main.js、webpack.config.dev.js中写代码

	1、App.vue 中输出 Hello Vue
	
	2、main.js中写代码
		达到的目的就是:
		2.1、导入根组件
			import App from './App.vue'
			
		2.2、渲染根组件
			2.2.1、安装  vue 的包
			2.2.2、创建一个根实例
			2.2.3、使用根实例中的render属性对应的函数，来渲染App.vue到
				id=app的div中去
				
			因为我们打包的是main.js，导入根组件，使用vue实例的render把根组件的
			Hello Vue渲染到id=app的div中去，让用户看到它
			
	3、编写webpack.config.dev.js中的代码
		3.1、安装 vue-loader vue-template-compiler css-loader style-loader 包
		3.2、编写了 entry module

3. 使用 html-webpack-plugin 创建 & webpack-dev-server 打包运行，预览效果

	3.1、使用 html-webpack-plugin 插件 生成 index.html
		3.1.1、安装 html-webpack-plugin webpack webpack-dev-server
		3.1.2、在项目根目录下创建一个参考文件 template.html
			在template中，只需要写id=app的div
		3.1.3、在webpack.config.dev.js中配置plugins
			new HtmlWebpackPlugin({
	            template:'./template.html', //参照文件的路径
	            filename:'index.html'
	        })
	3.2、在项目的根目录打开终端，在里面输入如下指令
		webpack-dev-server --config webpack.config.dev.js --progress --open --hot --port 6008
		
		我们如果觉得上面比较长，可以把上面一长串指令，可以放在package.json的scripts中，给他添加一个键值对 "dev":webpack-dev-server --config webpack.config.dev.js --progress --open --hot --port 6008，到时候运行，直接在根目录执行 npm run dev
		
		打包bundle.js，并且把生成好的bundle.js和上一步生成的index.html，发布到它内部的node服务器上面去，并且在index.html中，自动导入bundle.js

4. 项目中用到一些包

安装 vue
	应用场景:我们在根组件中去渲染App.vue，需要创建一个根实例，所以需要安装vue这个包
		安装方式: npm i vue --save/-S

安装 css打包文件
	应用场景:在我们webpack.config.dev.js中，需要配置对.vue结尾文件打包支持的时候
	安装方式: npm i vue-loader vue-template-compiler css-loader style-loader -D
	
安装: html-webpack-plugin
	应用场景:在使用html-webpack-plugin生成index.html的使用用到
	安装方式: npm i html-webpack-plugin webpack webpack-dev-server -D

5. 配置好的： webpack.config.dev

拷贝即可使用哦

// 引入
var HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js', //打包的入口文件
    module: {//配置loader
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.(ttf|eot|svg|woff|jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.vue', '.js', '.json', '*']
    },
    plugins: [//插件中的内容都是new出来的
        new HtmlWebpackPlugin({
            template: './template.html', //参照文件的路径
            filename: 'index.html'//最后发布到node服务器上面的名称
        }),
        
        // 全局使用 jQuery
        new webpack.ProvidePlugin({
	        $:"jquery",
	        jQuery:"jquery"
	    })
    ]
}