webpack
前端工程化： npm、 cnpm、 yarn、 bower|grund、 gulp、webpack
gulp:基于流的任务式的工具，前端自动化构建工具；
webpack是一款模块化打包工具，webpack是基于配置的，通过配置一些选项来让webpack执行打包任务。
webpack在打包的时候，依靠依赖关系图，在打包的时候需要告知webpack两个概念：入口和出口；
全局安装cnpm install webpack -g
我们需要使用webpack.config.js进行配置
cnpm init 生成配置文件packg.json
在项目中安装webpack ，cnpm install webpack -D
-
在webpack.config.js进行配置
可以搭配两套配置一个开发，一个生产用//暴露配置项
module.exports = {
// 配置入口文件
entry : "./src/main.js",
//配置出口文件
output : {
// 必须绝对路径
path : __dirname + "/build",
//加hash做一个简单的版本控制
filename: "main[hash].js"
},
}
在cmd 中执行webpack执行打包任务
入口entry
entry配置项目打包的入口，值可以为单个的字符串执行某一个文件的地址，这个时候该文件就是入口文件，webpack会根据入口文件里各模块间的关系形成依赖关系图，然后根据依赖关系图进行打包
entry : "./src/main.js",
//配置出口文件
output : {
// 必须绝对路径
path : __dirname + "/build",
//加hash做一个简单的版本控制
filename: "main[hash].js",
但是有的时候我们需要的是多入口，我们就写成数组的形式，数组里的每一个字符串地址指向的都是一个独立的入口，webpack会将这些入口的依赖打包
output:{
path:path.join(__dirname,'build'),
filename:'[name].js'//不确定名字的时候，这里会打包成main.js
}
刚才的两种entry配置都只会打包出一个js文件，但是在某一个应用中我们可能需要将js根据依赖关系打包成多个js文件，并且在多页面应用中，我们也确实不可能只使用一个js文件，那么我们就可以使用如下的配置：
entry:{
app:'./src/app.js',
vendor:'./src/vendor.js'
},
output:{
path:path.join(__dirname,'build'),
filename:'[name]_[hash].js'
}
这样，因为filename里写成名字是[name],所以会根据entry的配置的键名来为打包出的js文件命名，hash是每次打包的一个随机的hash值，可以用来做版本控制
output
在这里我们配置打包输出的一些选项
filename可以确定打包出来的文件的名字，在里面我们可以使用[name],[hash]这样的占位符
path配置打包出去的文件的路径，需要是绝对路径
env
在命令行或者终端中执行 webpack --env dev命令，就相当于在打包的时候传入一个参数为hello
在webpack.config.js中可以暴露出一个函数，这个函数就可以接收到env参数，当然函数就可以根据env参数来有选择的返回某一个或多个配置对象
引入
let devConfig = require("./webpack.dev.js")
let productionConfig = require("./webpack.production.js")
module.exports = (env)=>{
if(env=='production'){
return productionConfig
}
return developmentConfig
}
plugins
在webpack编译用的是loader，但是有一些loader无法完成的任务，交由插件（plugin）来完成，插件的时候需要在配置项中配置plugins选项，值是数组，可以放入多个插件的使用，而一般的插件都是一个构造器，我们只需在plugins数组中放入该插件的实例即可，在实例化插件的时候又可以传入options，对插件的使用进行配置
html-webpack-plugin
这个插件可以选择是否依据模板来生成一个打包好的html文件，在里面可以配置、title、template、filename、minify等选项，详情请查阅文档
在这个插件里，我们可以使用jade、hbs、ejs等模板引擎来编译成html，这里举例jade的配置：
文档
module:{
rules:[
{
test:/\.jade$/,
use:'jade-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// title:'webpack-config-demo',
template:'./src/index.jade',
filename:'index.html'
})
]
webpack-dev-server
webpack相辅相成的有一个server功能工具可以提供开发的热更新服务器
npm install webpack-dev-server -gnpm install webpack-dev-server -D
第一种启动方式： 直接执行webpack-dev-server,如果有需要配置的选项，在后面跟上参数即可。例如
webpack-dev-server --hot true
第二种启动方式：在webpack.config.js中配置devServer的选项，执行webpack-dev-server就ok
devServer:{
port:9000,
contentBase:'./build',
historyApiFallback: true,
open: true,
proxy:{
}
}
LOADERS
在webpack中专门有一些东西用来编译文件、处理文件，这些东西就叫loader，loader的使用就是在配置项中，设置modules，在modules中设置rule值为数组，在数组里放入多个匹配规则：
module:{
rules:[
{test:/\.css$/,use:'css-loader'}
],
//before
loaders:[
{test:/\.css$/,loader:'css-loader'}
],
}
test为此次匹配要匹配的文件正则规则，use代表要使用的loader
使用url-loader可以将css中引入的图片（背景图）、js中生成的img图片处理一下，生成到打包目录里
视图html-withimg-loader可以将html中img标签引入的img图片打包到打包目录
file-loader
{
test:/\.(png|jpe?g|svg|gif)$/,
// use:'url-loader?limit=1000&name=images/[hash:8].[name].[ext]'
use:[
{
loader:'url-loader',
options:{
limit:1000,
name:'/static/images/assets/[hash:8].[name].[ext]'
}
}
]
},
{
test:/\.html$/,
use:'html-withimg-loader'
}
处理css：
cnpm i css-loader style-loader --save-dev
配置：
{
test:/\.css$/,
use:['style-loader','css-loader']
}
注意。webpack中loader的使用是从后往前的
css-loader可以将引入到js中的css代码给抽离出来，style-loader可以将抽离出来的css代码放入到style标签中
处理sass
{test:/.scss$/,use:['style-loader','css-loader','sass-loader']},
将引入项目的css文件、scss文件抽成一个文件，引入到页面中
cnpm i extract-text-webpack-plugin
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
///loader
{
test:/\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.scss/,
use:ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
}
///plugin
new ExtractTextWebpackPlugin({
filename:'app.css',
allChunks:true
})
因为ExtractTextWebpackPlugin对webpack4支持的不好，所以解决方法
cnpm install extract-text-webpack-plugin@next -D
@next下载的就是最新的版本
webpack-dev-server进行一个优化。开启服务后，会将编译结果保存在内存里，并不会输出打包结果
css兼容：post css loader
处理es6：
需要的依赖：（版本号跟上，配套）"babel": "^6.23.0", cnpm install [email protected] -D"babel-core": "^6.24.1","babel-loader": "^7.0.0",(配合webpack)"babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1",
rules：{
test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query: {
presets: ['es2015','react']
}
}
ES6中的react
1.创建组件：
使用class来创建组件
class App extends React.Component {
}
2.默认状态的设置
在es6中不再使用getInitialState来设置默认状态，而是在constructor里面直接给this.state上挂载状态
class App extends Component {
constructor(props){
super(props)
this.state={
doing:'吃饭'
}
}
}
- 默认属性的设置
在es6中，通过给类设置defaultProps属性来设置默认属性
App.defaultProps = {
name:'App根组件'
}
- 做属性传参验证
import PropTypes from 'prop-types';
App.propTypes = {
name:PropTypes.string
}
5.钩子函数有变化
getDefaultProps、getInitialState没有了
多出了constructor,而这个函数本身是类的构造器，在这里相当于getDefaultProps、getInitialState的结合
create-react-app 脚手架
npm install creat-react-app -g
create-react-app my-app //生成一个react开发模板在my-app目录//生成的过程特别缓慢，可以使用yarn工具来下载，也就是说先去下载安装yarn ：npm install yarn -g
cd my-app
npm install