webpack创建html项目,从零开始其于webpack搭建bootstrap 4项目

环境与目录与初始化

首先确认安装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 中(

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能正常运行。