webpack部分

1.安装jquery

npm install jquery -S

2.引入到index.js

import $ from 'jquery

$(function(){

})

2.webpack的使用

npm install [email protected] [email protected] -D

2.1 webpack.config.js配置

在根目录下创建webpack.config.js

const path = requirt('path')

module.exports = {
		//或者production(发布使用)
	mode:'development" 

		//更改webpack打包输出文件路径,上方先引入
	entry:path.join(__dirname,'./src/index.js")  //输入默认src=>index.js;可更改默认输入js
	output: {path.join(__dirname,'./dist')  //输出默认dist文件夹main.js
	filename: '输出文件重命名(bundle.js)'  //将会替换输出文件名
	}

	devServer:{
		open: ture,  //项目打包后自动打开浏览器,建议在3.2完成后
		port: 80,  	//指定端口号,不写80为默认
		host: '127.0.0.1' //指定运行主机
	}
}

2.2配置package.json

"script" ={
	"dev": "webpack"
}

2.3运行方式

npm run dev

//dev是package.json中script中的dev关键词,运行webpack
//调试的时候安装自动打包插件dev关键词更改为webpack serve

3.插件安装

3.1 自动保存调试webpack-dev-server

npm install [email protected] -D

package.json ->
	"script" ={
	"dev": "webpack serve"
	}
浏览器访问http://localhost:8080查看打包效果

3.2 解决webpack-dev-serve的即时显示问题插件

npm install [email protected] -D

const htmlPlugin = require('html-webpack-plugin)

const htmlPlugin = new HtmlPlugin({
	template:'./src/index.html',  //原文件存放路径(虚拟内存)
	filename:'./index.html',  //生成文件路径(现在自定路径)
})

module.exports = {
	mode:'development',
	plugins:[htmlPlugin],  //通过plugin结点使插件生效
}
这个插件还会为生成的页面自动注入js(bundle.js)