webpack4 + san 快速构建一个项目
2018-05-13 本文已影响0人
Howie126313
废话部分:
san 是百度做的一个 MVVM 的组件框架，主要的特点就是兼容 IE 6。还有一些其他的balabala，详见官网吧。https://baidu.github.io/san/ 可能水平问题感觉官网说的并不是特别清楚，想要了解的同学可以仔细看看官网的几个 demo 。另外需要注意的是 webpack4 ，加入了快速设置的功能。在不同的 mode 下，默认的配置详见：https://webpack.js.org/concepts/mode/
最近在做百度前端学院的相关东西，仓库地址：https://github.com/Howie126313/BaiduCourse
Get started：
新建一个文件夹同时执行 ：（如果使用 npm 的话下面命令替换 npm 相关命令即可）
yarn init
或 npm init
然后安装一些需要的依赖
yarn add san san-router webpack
yarn add babel-core babel-loader babel-preset-env css-loader file-loader san-loader style-loader html-loader html-webpack-plugin webpack-cli webpack-dev-server webpack-merge -D
新建一个 config 文件夹，配置以下配置文件
webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'none',
entry: {
app: './src/main.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.san$/,
use: 'san-loader'
},
{
test: /\.svg|.jpg|.jpeg|.png$/,
use: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: 'index.html',
filename: 'index.html'
})
]
}
webpack.dev.js
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devServer: {
contentBase: './dist'
}
})
webpack.prod.js
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'production'
})
在根目录创建 .babelrc文件
{
"presets": [
"env"
]
}
然后在 package.json 中写入启动命令
{
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"start": "webpack-dev-server --open --config config/webpack.dev.js"
},
"dependencies": {
"san": "^3.5.8",
"san-router": "^1.2.0",
"webpack": "^4.8.3"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"san-loader": "^0.0.7",
"style-loader": "^0.21.0",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
}
根目录下新建 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
新建 src 文件夹，新建 main.js 文件
import san from 'san'
import {router} from 'san-router'
import Hello from './Hello.san'
router.add({rule: '/', Component: Hello, target: '#root'})
router.start()
然后新建一个组件 Hello.san
<template>
<div class="hello">
<div class="content">
<div class="title">
<div class="color">Hello {{msg}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
initData () {
return {
msg: 'San'
}
}
}
</script>
<style>
.color {
width: fit-content;
font-size: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;
}
</style>
ok,执行
yarn start
就会看到下面的效果
