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

34 1 个月前
使用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

  1. css-loader:解析 CSS 文件,拿其可以作为javascript模块来加载(import,require);
  2. style-loader:将模块的导出作为样式添加到 DOM 中(<style>标签);
  3. less-loader:解析less文件;
  4. sass-loader:编译sass到css文件;
  5. node-sass:提供了一个nodejs编译sass到css文件,sass-loader需要此依赖;
  6. stylus-loader
  7. postcss-loader:PostCSS = CSS预处理器 + CSS后处理器
  8. 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-loaderfile-loaderurl-loader只是当文件大小低于指定的限制时,可以返回一个 DataURL

npm install --save-dev url-loader file-loader

然后在webpack.config.jsmodule.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.jsmodule.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.jsplugins配置jquery:

new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }),

设置路径别名

webpack.config.jsresolve里配置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.jsmodule.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能正常运行。

没有了
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6