webpack@3.6.0（1） -- 快速开始

本篇内容

• 前言
• 配置入口和输出
• 热更新
• loader配置
• js代码压缩
• html的打包与发布

前言

//全局安装
npm install -g webpack（3.6.0）

npm init

//安装到你的项目目录
npm install --save-dev webpack   //本地化安装是防止全局的版本冲突，团队配合时也应注意node跟webpack版本的统一性

//在package.json中
"dependencies": {
    //生产环境相关依赖    cnpm i -S/--save  xxx
},
"devDependencies": {
    //开发环境相关依赖      cnpm i -D/--save-dev   xxx
}

//另：
cnpm i -g live-server


//使用：
live-server    //(直接到开服务器进入项目根目录)

webpack.config.js配置入口和输出

//新建工程主文件夹
md src
echo >> main.js
echo >> index.html
//根目录下配置文件
cd ../
echo >> webpack.config.js

const path=require('path');
module.exports={
	entry:{
		main:'./src/main.js',           //键名决定打包后的名字
		main2:'./src/main2.js',     //多入口
	},
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'[name].js'          //根据入口名字生成相应的文件
	},
	module:{},
	plugins:[],
	devServer:{}
}

webpack 即可打包查看结果

热更新（该方式页面会刷新）

cnpm i -D webpack-dev-server（2.8.2）   

//配置热更新
devServer:{
	contentBase:path.resolve(__dirname,'dist'),
	host:'192.168.1.122',
	compress:true,      //压缩
	port:1234
}

//在package.json中
"scripts": {
    "server": "webpack-dev-server"    //--open直接运行并打开浏览器'webpack-dev-server --open'
},
  
//运行
npm run server

如果热更新有问题，另加插件

plugins: [
    //...
    new webpack.HotModuleReplacementPlugin(),  //webpack自带

loader配置

如：style-loader css-loader

cnpm i -D style-loader css-loader

// webpack.config.js
module:{
	rules:[
		{
			test:/.css$/,    //要匹配的文件后缀名
			loaders:['style-loader','css-loader']
			// include/exclude //(需要处理/不需要处理)
		}
	]
},
//main.js
import css from './css/index.css';    //被打包再js文件中

//运行
npm run server

js代码压缩

const uglify=require('uglifyjs-webpack-plugin');

plugins:[
	new uglify()
],

html的打包与发布（在此之前并不能直接生成html文件,在dist中，.js文件也为注入）

cnpm i -D html-webpack-plugin

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

plugins:[
	// new uglify()
	new htmlPlugin({
		minify:{     //压缩
			removeAttributeQuotes:true    //去除标签属性的''
		},
		hash:true, 			//防止缓存的影响
		template:'./src/index.html'
	})
],

//运行
webpack

注意：

cnpm i live-server  //注意：与cnpm i -g live-server效果一样

cnpm i --production //只安装生产环境的安装包

项目地址：https://github.com/adoctors/webpack-3.6.0-demo1