1.安装webpack:

全局安装webpack\webpack-cli: npm intall webpack webpack-cli -g

初始化package.json : npm init -y 局部安装webpack/webpack-cli:npm install webpack webpack-cli -s

使用webpack:

①不用配置文件进行打包：webpack-cli --entry --output // webpack4以下使用webpack命令

webpack-cli --entry ./app.js --output bundle.js

②使用webpack.config,新建webpack.config.js 配置文件

module.exports ={
	entry:{
		app1:"./app.js" //入口文件
	},
	output:{
		path:__dirname + '/src/mybundle' , // pathname只能接受绝对路径 __dirname表示当前项目绝对路径
		filename:'[name].[hash:6].js' // hash 随机字符串，取N位
	}
}

开始打包：

• （1）运行webpack使用默认配置文件进行打包
• （2）webpack --config configfile 使用自定配置文件进行打包

2.使用babel-loade编译es6语法

安装loader ：npm install babel-loader @babel/core -save-dev

module:{
    rules:[
        {
        test: /\.js$/ ,// 定义需要处理的类型文件
        user:'babel-loader'
        }
    ]
}

（1）babel-preset储存javascript不同标准插件，针对特定的规范进行编译：

安装：npm install @babel/preset-env -save-dev 配置：在use的option里配置preset插件

option:{
		presets:[ 
		['@babel/preset-env',{
			targets:{
				browsers:['>1%'] // 以特定浏览器为目标，可使用指定浏览器 chrom:'59'
			}
		}]
		]
	}

（2）使用babel-polyfill编译ES6新方法：

安装：npm install babel-polyfill -save-dev --使用babel-polyfill,①或② ①安装后在项目文件引入：import 'babel-polyfill' ②在配置文件入口处添加：

entry:{
		app1:["babel-polyfill","./app.js"] //入口文件
}

ps:会生成一个全局对象，对所有方法使用es5重写，打包后文件较大

（3）使用babel-transform-runtime编译ES6方法

安装：npm install @babel/plugin-transform-runtime @babel/runtime --save --使用babel-tansform-runtime,需与@babel/core版本对应 ①配置：在use的option里配置：

"plugins":[
		[@babel/transform-runtime]
]

ps:生成局部对象，仅对使用方法重写 ps:babel相关配置的option配置项里的内容可移动到belrc里进行设置

3.使用typescript和ts-loader编译typescript

• 安装: npm install typescript ts-loader -save -dev
• 在webpack.config.js里配置

{
    test:/\.tsx?$/,
    use:'ts-loader'
}

或新建tsconfig.json 进行配置

{
	"compilerOptions":{
		"module":"commonjs", //使用的模块化规范
		"target":"es5",  //使用的编译规范
	},
	"exclude":["./node_modules"],  //排除不需要处理的文件夹
}

4.处理css：

• ①使用css-loader，让css 可以被js正确引入，
• ②使用style-loader,使css引入后可以插入页面 ps:先经过css-loader，再由style-loader处理。 安装：npm install style-loader css-loader --save 配置：

{
    test:/\.css$/,
    use:[{
    	loader:'style-loader'
    },{
    	loader:'css-loader'
    }]// 使用数组定义两个loader,顺序从后往前，因此css-loader放在后面
}

style-loader相关配置：

{
	loader:'style-loader',
	options:{
        injectType:'styleTag',//表示插入的style样式，可不可合并"singletonStyleTag","lazyStyleTag","lazySingletonStyleTag","linkTag"
        attributes:{ id: 'id' }, // 给插入的标签添加属性
        insert:'body',//在指定区域插入style标签
        base:100//指定多个配置文件的优先级
    }
}

5.处理less、sass

处理less 需安装less和less-loader ,处理sass需要sass和sass-loader 安装：npm install less less-loader --save 安装sass npm install sass sass-loader --save 配置：在css-loader后添加配置

{
	loader:'less-loader'
}

或

{
	loader:'sass-loader'
}

6.提取单独的css 文件：extract-text-webpack-plugin

（1）安装：npm install extract-text-webpack-plugin --s

在webpack4中无效，需要指定相应的版本，webpack4 使用npm install extract-text-webpack-plugin@next --s ， 同时局部安装webpak,npm install webpack--s

（2）引入插件：

const extractTextCss = require('extract-text-webpack-plugin')

（3）添加插件到plugin配置项里

plugins:[
    new extractTextCss({
    filename:'[name].min.css'
    })
]

（4）改造loader写法

改写处理css的use:

use:extractTextCss.extract({
	fallback:{//原loader下的style-loader
		loader:'style-loader',
		options:{
			injectType:'styleTag',
		}
	},
	use:[{//其他的loader放入use下的数组
    	loader:'css-loader'
    },
    {
    	loader:'less-loader'
    	
    }]
})

7.使用postcss

• (1)安装：安装postcss 和其他插件，postcss 本身不具备功能，npm install postcss postcss-loader autoprefixer postcss-cssnext --s
• (2)配置：在less等loader前，css-loader后

{
    loader:'postcss-loader',//单独使用无效，需安装插件
    options:{
    ident:'postcss',
    plugins:[
    require('autoprefixer')({"overrideBrowserslist":[">1%","last 2 version"]})//自动为css添加前缀,指定浏览器才能针对特定浏览器进行编译
    ]
    }
}

ps:不同的loader 需要指定相同浏览器下编译，可直接在package.json里配置浏览器 "browserslist":[">1%","last 2 version"]

或者新建.broserlistrc 写入对浏览器的配置。

8.html打包，使用html-webpack-plugin生成html

• （1）安装：npm install html-webpack-plugin --s --d
• （2）引入插件：

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

• 注册插件：

new htmlWebpackPlugin({
    filename:'index.html',//指定打包后生成html名字
    template:'./index.html',//指定以哪个html为模板进行打包
    minify:{
    collapseWhitespace:true
    },//是否压缩html文件，使用对象
    inject:false,//是否自动引入js和css,默认为true
    chunks:['app1'] // 在多入口打包情况下引入选中的js,默认全部引入
})