webpack简介:
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。现在react+wabpack+es6非常常见。
webpack工作方式:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
webpack的使用:
1、打开命令行工具,进入项目所在的位置,npm init
初始化项目,生成package.json文件(标准的npm说明文件,包括当前项目的依赖模块,自定义的脚本任务等等)
//package.json
{
"name": "webpack",
"version": "1.0.1",
"description": "webpack test",
"main": "main.js",
"scripts": {
"server": "webpack-dev-server --open", //启动本地服务器
"test": "a test command",
"start": "webpack",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
},
"author": "cg",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.28.7",
"jsx-loader": "^0.13.2",
"style-loader": "^0.19.0",
"webpack-dev-server": "^2.9.1"
}
}
2、本地安装webpack,npm install webpack --save-dev
,安装之后,项目下会有node_modules文件夹,这是项目依赖所在的包;外部导入的项目,如果存在webpack.config.js文件,可以npm install
生成node_modules文件夹
3、新建webpack.config.js,建立webpack配置文件
//webpack.config.js
const webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');//用于生成绝对路径
module.exports = {
devtool: 'eval-source-map', //为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试
entry: __dirname+"./src/main.js", //唯一入口文件,“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
output: {
path:__dirname+"/src", //打包后文件存放的位置
filename: "build/build.js", //打包后输出文件的文件名
publicPath:'http://cdn.com/' //满足上线
},
devServer: { //构建本地服务器
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
} ,
module: {
loaders: [
{
test:/\.js$/,
loader:'babel',
query:{
presets:['es2015'] //告诉babel-loader处理怎样js转换成浏览器支持的js代码
},
exclude:path.resolve(__dirname,'./node_modules /'),//不处理node_modules
include:'./src/'//只打包src目录下的文件
},{
test:/\.css$/,
loader:'style-loader!css-loader!postcss-loader' //处理css文件
},{
test:/\.less$/,
loader:'style!css!postcss!less'
},{
test:/\.scss$/,
loader:'style!css!postcss!scss'
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new htmlWebpackPlugin({
template:'index.html',
filename:'index-[hash].html',
inject:'head', //表示脚本嵌入到头部
minify:{
removeComments:true //对生成的html进行压缩
},
excludeChunks:['a','c']
})
],
};
4、在命令行输入 webpack
打包运行,在package.json的script脚本中添加"start": "webpack"
,可以使用npm start
打包运行项目。
loaders
- test:一个用以匹配loaders所处理文件的拓展名的正则表达式
- loader:loader的名称
- include/exclude:手动添加必须处理的文件或屏蔽不需要处理的文件
- query:为loaders提供额外的设置选项
Babel
编译JavaScript的平台,使得ES6、ES7,以及基于JavaScript的扩展语言,比如React的JSX能够被当前浏览器所支持
Babel完全可以在 webpack.config.js 中进行配置,但由于babel具有非常多的配置选项,在webpack.config.js文件中进行配置会使得这个文件变得复杂,因此可以将babel的配置选项放入单独的名为 “.babelrc” 的配置文件中。
//.babelrc
{
"presets": [
"es2015",
"stage-2",
"react"
],
"plugins": [
["transform-runtime"],
[
"transform-es2015-for-of"
],
[
"transform-class-properties"
],
[
"react-transform",
{
"transforms": [{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
}]
}
]
]
}
插件
用来拓展Webpack功能的,在整个构建过程中生效,执行相关任务。