1>webpack-初识webpack及环境搭建
npm install -g webpack ???全局安装
npm install -g webpack-dev-server ?准备一个服务器并监听
webpack <需要打包的文件> bundle.js（输出到哪去） 打包文件
webpack <需要打包的文件> bundle.js（输出到哪去） --watch ?持续监听、打包文件
webpack ?对应 model.exports 和 require()搭配使用 ???自定义的文件引入时需要./文件位置
系统自带的不需要./
2>webpack-运用第三方库
??使用第三方插件以使用jQuery为例
cnpm install jquery --save ——先下载
let $ =require("jquery") ——再调用
静态文件模块化 以css为例
npm install css-loader style-loader --save-dev
下载后直接引入文件就好
单个文件——require(‘!style-loder!css-loder!./style.css‘)
整体文件——配置webpack入口文件webpack.config.js（必须起这个名字，否则找不到）
内容：
module.exports = {
???// 入口文件
???entry : ‘./app.js‘,
???// 出后文件
???output : {
???????path: __dirname + ‘/dist‘,
???????filename : "bundle.js"
???},
???// 需要依赖的插件或者装载器
???module :{
???????loaders : [
???????????{test : /\.css$/,loader : "style-loader!css-loader"}
//正则 所有的css都会通过装载器模块化
???????]
???}
}
之后的打包命令就可以直接使用webpack 会找到入口文件
3>webpack-搭建服务器
使用webpack-dev-server
npm install -g webpack-dev-server
如何使用package.json启动项目
在一个项目中 package.json文件控制了项目的构建方式
我们可以通过修改他来实现自主可控
"scripts": {
???"start": "webpack-dev-server --entry ./app.js --output-filename ./bundle.js",//让项目在
服务器端运行 入口文件、出口文件 路径要正确 此后可以通过npm run start命令启动
???"build" : "webpack"//构建项目 ?npm run build
?},
项目中的es6语法不是所有浏览器都兼容，所以我们通过babel来将es6转化为es5
安装：
npm install babel-core babel-loader babel-preset-es2015
三个模块分别是 babel核心插件 装载器 需要预编译的语言
之后我们需要在webpack的入口文件webpack.config.js中编辑
module :{
???????loaders : [
???????????{
???????????????test : /\.js$/,//所有的js文件
???????????????loader : "babel-loader", //使用装载器编译
???????????????exclude : /node_modules/, //排除的文件
???????????????query : {
???????????????????pressets : ["es2015"] //查询预编译的文件
???????????????}
???????????},
???????]
???}
webpack学习笔记
原文地址：http://www.cnblogs.com/yangyiyuan825/p/7642856.html