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

巴特西

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

本篇内容

前言

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

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

loader配置

js代码压缩

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

最新文章

热门文章