hodgepodge环境与目录与初始化
首先确认安装node环境，不多说，运行node -v我的是v10.15.3。
其次在要创建项目的目录运行：
mkdir bs4
cd bs4
新建了bs4目录并进入此目录后，初始化项目
npm init -y
项目使用Git管理，安装好Git后运行：
git init
在项目根目录创建.gitignore文件并输入如下内容：
.DS_Store
node_modules
/dist
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
安装 webpack
新版webpack需要安装webpack-cli：
npm install webpack webpack-cli --save-dev
在项目根目录新建webpack.config.js来配置webpack。其内容初始如下：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
index:"./src/index.js"
},
output: {
path: path.resolve(__dirname,"dist"),
filename: "[name].js",
publicPath: ""
},
module: {
rules: []
},
devServer: {
contentBase: path.resolve(__dirname,'dist'),
host:"localhost",
port:8080,
open: true
},
plugins: []
};
新建src目录，用于存放开发源文件。
安装 webpack-dev-server
webpack-dev-server用于搭建一个服务器。
npm install webpack-dev-server --save-dev
修改根目录下package.json文件scripts字段，添加入下内容：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
安装 html-webpack-plugin
html-webpack-plugin用于简单创建 HTML 文件，用于服务器访问。
npm install html-webpack-plugin --save-dev
安装成功后，在webpack.config.js配置文件头部引入此插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
并在webpack.config.js配置文件plugins内实例化HtmlWebpackPlugin：
new HtmlWebpackPlugin({
chunks:['index','common','vendor'],
filename:"index.html",
template:"./public/index.html",
hash:true
})
项目根目录新建public目录，并添加一个index.html作用入口的模板文件。
安装 clean-webpack-plugin
clean-webpack-plugin用于每次打包前清楚以前打包生成的文件。
npm install clean-webpack-plugin --save-dev
安装成功后，在webpack.config.js配置文件头部引入此插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
并在webpack.config.js配置文件plugins内实例化CleanWebpackPlugin：
new CleanWebpackPlugin()
安装 mini-css-extract-plugin
mini-css-extract-plugin用于webpack 4对css提取，安装：
npm install mini-css-extract-plugin --save-dev
安装成功后，在webpack.config.js配置文件头部引入此插件
const MiniCssExtractPlugin =require('mini-css-extract-plugin');
并在webpack.config.js配置文件plugins内实例化MiniCssExtractPlugin：
new MiniCssExtractPlugin({
filename:"[name].css",
chunkFilename: "[id].css"
})
在webpack.config.js配置module.rules数组，添加如下内容：
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options: {
publicPath:"/"
}
},
"css-loader"
]
}
安装 loader
对于css我们考虑全面点，安装如下loader。
css-loader：解析 CSS 文件，拿其可以作为javascript模块来加载（import，require）；style-loader：将模块的导出作为样式添加到 DOM 中(<style>标签)；less-loader：解析less文件；sass-loader：编译sass到css文件;node-sass：提供了一个nodejs编译sass到css文件，sass-loader需要此依赖；stylus-loader：postcss-loader：PostCSS = CSS预处理器 + CSS后处理器autoprefixer：添加前缀。
npm install style-loader css-loader --save-dev
npm install node-sass sass-loader --save-dev
npm install --save-dev less less-loader
npm install --save-dev postcss postcss-loader autoprefixer
npm install --save-dev stylus stylus-loader
安装完成之后，我们来配置webpack.config.js：
module: {
rules: [
{
test: /\.css$/,
use:[
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
'postcss-loader',
"sass-loader"
]
},
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'stylus-loader'
]
}
]
},
新建项目根目录postcss.config.js用来配置postcss，其内容如下：
module.exports = {
plugins: {
autoprefixer: {}
}
}
对于其他文件（如图片）我们使用url-loader 和 file-loader。url-loader只是当文件大小低于指定的限制时，可以返回一个 DataURL
npm install --save-dev url-loader file-loader
然后在webpack.config.js里module.rules配置图片加载：
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
]
},
使用下一代javascript代码（ES6/ES7）,我们要安装babel:
npm install @babel/core babel-loader babel-preset-env --save-dev
在项目根目录新建babel.config.js用于配置balel:
module.exports = {
"presets":["env"]
};
然后在webpack.config.js里module.rules配置加载：
{
test: /\.js$/,
use: [
'babel-loader'
],
exclude: /(node_modules)/
}
webpack splitChunks
在webpack.config.js里配置代码拆分：
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
commons: {
chunks: "initial",
name: "common",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
},
安装 bootstrap jquery
最新版为bootstrap 4版本。
npm install bootstrap --save
npm install jquery --save
在webpack.config.js的plugins配置jquery:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
}),
设置路径别名
在webpack.config.js的resolve里配置alias:
alias: {
src: path.resolve(__dirname, 'src'),
public: path.resolve(__dirname, 'public')
}
安装 eslint
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-loader babel-eslint -D
根目录下新建.eslintrc.js并配置：
module.exports = {
root: true,
env: {
"browser": true,
"node": true,
"commonjs": true,
"es6": true,
"jquery": true
},
"extends": [
"standard",
"eslint:recommended"
],
"rules": {
'no-extra-semi':2,
'quotes':[2,'single']
},
parser: 'babel-eslint'
};
webpack.config.js里module.rules配置.js的加载：
{
test: /\.js$/,
use: [
'eslint-loader'
],
exclude: /(node_modules)/,
enforce: 'pre'
},
{
test: /\.js$/,
use: [
'babel-loader'
],
exclude: /(node_modules)/
},
同时，在webstorm里添加eslint代码检测：
测试
添加如下目录入文件：
在入口index.js里分别引入我们需要测试的文件
import 'public/css/main.scss'
import 'public/css/style.css'
import 'public/css/c.less'
import 'public/css/a.styl'
import a from 'public/js/a.js'
a();
在main.scss里，引入了bootstrap以及用于定制的custom。
测试所有样式以及js能正常运行。
