less写法

匹配模式

1
2
3
4
5
6
7
8
9
10
11
12
.triggle(@_,@width: 30px,@color: #ccc){//width和color参数必须写
    //公共样式diamante
}
.triggle(top,@width: 50px,@color: #ccc){
    //传入的第一个参数为top才会匹配到
}
.triggle(bottom,@width,@color){
    //传入的第一个参数为bottom才会匹配到
}
.sanjiao{
    .triggle(top,20px,red)
}

嵌套

1
2
3
<ul>
    <li><a href=""><span></span></a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul{
    weith: 600xp;
    li{
        list-style: none;
        a{//匹配深，影响性能
        }
    }
    a{//不放到li里面
        // & 代表上一层选择器
        &:hover{
            coloor:red;
        }
    }
}

@arguments

1
2
3
4
.triggle(@width: 50px,@color: #ccc){
    //传入的第一个参数为top才会匹配到
    border: @arguments;
}

HtmlWebpackPlugin

1
npm install --save-dev html-webpack-plugin
1
2
3
4
5
6
7
8
9
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
  new HtmlWebpackPlugin({
    title: 'Output Management', //页面title
    filename: 'admin.html',     //html的文件名
    filename: 'html/admin.html',//打包至html文件夹下
    inject: true | 'head' | 'body' | false //<scrip></scrip>标签插入的位置
  })
],

Cleaning up the /dist folder

1
npm install clean-webpack-plugin --save-dev
1
2
3
4
5
const CleanWbpackPlugin = require('clean-webpack-plugin')
plugins: [
  new CleanWbpackPlugin(['dist']), //打包时清空dist目录
]

Using source maps

1
2
3
4
module.exports = {
    devtool: 'inline-source-map',
    //开发环境正确指出哪行出错
}

Using webpack-dev-server

1
npm install --save-dev webpack-dev-server
1
2
3
4
5
6
//  package.js
"start": "webpack-dev-server --open"
// webpack.config.js
devServer: {
    contentBase: './dist'
},

Hot Module Replacement（HMR）

webpack.config.js

1
2
3
4
5
6
7
8
9
const webpack = require('webpack')
module.exports = {
    devServer:{
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

CLI

1
webpack-dev-server --hotOnly

编译react

1
2
3
4
5
6
7
    Module build failed: SyntaxError: react/hello.jsx: Unexpected token (5:11)
  3 | export default class Hello extends React.Component {
  4 |   render() {
> 5 |     return <h1>Hello world</h1>;
    |            ^
  6 |   }
  7 | }

1创建.babelrc文件

1
npm install babel-preset-react babel-preset-es2015 babel-preset-stage-0 --save-dev

1
2
3
4
5
6
7
8
{
"presets": [
  "es2015"
],
"plugins": [
    ["transform-react-jsx"]
  ]
}

2 安装react-dom(react15)

1
npm install react-dom --save-dev

1
2
3
import ReactDOM from 'react-dom';
ReactDOM.render(<Hello />, document.getElementById('app'));
React.render(<Hello />, document.getElementById('app'));//react15后不能这样写