webpack打包

Webpack入门指南

一、什么是 webpack？

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、ES6、样式（含less/sass）、图片等都作为模块来使用和处理。

更多webpack学习内容

二、安装

$ npm install webpack-g

三. 配置

创建webpack.config.js它的作用和gulpfile.js一样就是一个配置项，设置 webpack 任务功能。

entry 入口文件 让webpack用哪个文件作为项目的入口

output 出口 让webpack把处理完成的文件放在哪里

module 模块 要用什么不同的模块来处理各种类型的文件

plugins 用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。

resolve 用来设置路径指向

watch 用监听文件有改动后执行打包

module.exports={entry:"",//入口文件output:{//出口path:"",filename:""},module:{//模块loaders:[{test:/\.js$/,loader:""}]},plugins:{},resolve:{},wacth:true}

webpack命令

//直接运行webpack.config.js来打包$ webpack//使用另一份配置文件来打包$ webpack--config XXX.js//监听变动并自动打包$ webpack--watch//压缩混淆脚本$ webpack-p

四.开启服务器自动刷新

安装全局webpack-dev-server模块

//安装$ npm install webpack-dev-server-g//运行$ webpack-dev-server--progress--colors

配置设置webpack.config.js

devServer:{contentBase:"www/",inline:true,port:"3000"}

五.例子说明

1.例子demo01文件

全局安装webpack就可以运行演示例子

2.例子demo02文件

需要引入CommonsChunkPlugin,这个属于webpack内置的一个插件，需要在当前目录安装webpack

作用是：用于提取多个入口文件的公共脚本部分

配置设置webpack.config.js

varwebpack=require('webpack');module.exports={...plugins:[newwebpack.optimize.CommonsChunkPlugin({name:'common',//合并公共模块到指定的JS文件  注意不要.js后缀filename:'js/common.js',//输出的目录chunks:['index','login']//抽取的文件})]}

3.例子demo03文件

打包样式和转换less或sass

//安装出来css模块$ npm installstyle-loader css-loader--save-dev//安装转less模块$ npm install less-loader less--save-dev//安装转sass模块$ npm install sass-loader node-sass--save-dev

配置设置webpack.config.js

varwebpack=require('webpack');module.exports={...module:{// webpack使用loader的方式来处理各种各样的资源，比如说样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件loaders:[// { test: /\.(css|less)$/, loader: 'style-loader!css-loader!less-loader'},{test:/\.scss$/,loader:'style-loader!css-loader!sass-loader'}]},resolve:{alias:{style:'../module/style.less',//后续直接 require('style') 即可}},watch:true//监听文件一旦改变重新打包}

4.例子demo04文件

加载模块到全局和自动刷新

//安装全局webpack-dev-server模块$ npm install webpack-dev-server-g//启动服务器$ webpack-dev-server--progress--colors

配置设置webpack.config.js

module.exports={...devServer:{inline:true,port:8080}...}