webpack(构建一个前端项目)详解--升级

升级一个正式的项目结构

分离webpack.config.js文件：

新建一个webpack.config.base.js任何环境依赖的wbpack

//public webpack
const path = require('path');

const config = {
  target: 'web',
  entry: path.join(__dirname, '../src/index.js'),
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/ //node_modules忽略掉
        },
        {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '/resource/[path][name].[hash:8].[ext]'//静态文件打包在资源文件下
            }
          }
        ]
      }
    ]
  }
}

module.exports = config

新建webpack.config.client.js他是依赖于webpack.config.base.js,利用webpack-merge工具扩展配置文件。合并各种webpack配置文件。根据webpack里面的各个项合理的合并webpack.config文件。

安装：npm install webpack-merge -D

.json:文件中的dependencies中只放vue的版本，其余版本放在devDependencies

const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractPlugin = require('extract-text-webpack-plugin');//单独打包css文件的插件
const merge = require("webpack-merge");
const baseConfig = require("./webpack.config.base");
const isDev = process.env.NODE_ENV === 'development';

let config;
const defaultPlugins = [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: isDev ? '"development"' : '"production"'
        }
    }),
    new HTMLPlugin()
];
const devServer = {
    port: 8099,
    host: '0.0.0.0',
    overlay: {
        errors: true,
    },
    hot: true
};

if (isDev) {
    config = merge(baseConfig,{//合并到baseConfig文件中
        devtool: '#cheap-module-eval-source-map',
        module: {
            rules: [
                {
                    test: /\.styl/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                            }
                        },
                        'stylus-loader'
                    ]
                }
            ]
        },
        devServer,
        plugins: defaultPlugins.concat([
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin()
        ])
    });
} else {
    config = merge(baseConfig,{
        entry: {
            app: path.join(__dirname, '../src/index.js'),
            vendor: ['vue']
        },
        output:{
            filename: '[name].[chunkhash:8].js'
        },
        module: {
            rules: [
                {
                    test: /\.styl/,
                    use: ExtractPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            'css-loader',
                            {
                                loader: 'postcss-loader',
                                options: {
                                    sourceMap: true,
                                }
                            },
                            'stylus-loader'
                        ]
                    })
                }
            ]
        },
        plugins: defaultPlugins.concat([
            new ExtractPlugin('styles.[contentHash:8].css'),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor'
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'runtime'
            })
        ])
    });
}

module.exports = config

修改json文件：

"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

vue-loader的配置

在build文件下新建vue-loader.config.js

传入环境的判断，暴露出去一个对象，vue-loader相关的配置

preserveWhitepace: true,消除文本中的空格
extractCSS: true,//vue组件中的css打包到单独的文件中
cssModules: {},
hotReload: false,//默认情况下是在production的情况下关闭热重载，不必设置

//以下不怎常用：
定义全局的的loader
const docLoader = require.resolve("./doc-loader");
loaders: {
    "docs": docLoader,
    js: "coffe-loader"//指定了loader会根据相应的loader去解析它
},//自定义模块，
preLoader: {
    //...
},//先解析哪一种loader
psotLoader: {
    //...
}

//使用时添加在摸个组件中
<docs>
    //...构建组件库的时候，给每一个组件写文档
</docs>

module.exports = (isDev) => {
    return {
        preserveWhitepace: true,
        extractCSS: true
        //这个实在线上环境是使用的所以开发版本不适用
        extractCSS: isDev
    }
}

在base.js中引入使用,修改rules下.vue-loader

const createVueLoaderOptions = require("./vue-loader.config");
const isDev = process.env.NODE_ENV === 'development';

     {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: createVueLoaderOptions(isDev)
      },

css的热跟新

默认的css是没有热更新的，要安装vue-style-loader

npm install vue-style-loader -D

安装了之后修改webpack.congif.js文件中的style-loader

打包之前删除上一次打包的文件

安装rimraf每次打包之前删除打包的上一个版本

npm install rimraf -D

在json文件中添加clear

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
    "build": "npm run clean && npm run build:client",
    "clean": "rimraf dist",//删除文件
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"
  }

cssModule的配置：

cssModules: {
    localIdentName: "[path]-[name]-[hash:base64:5]"
    //线上的可以省略路径，name
    localIdentName: "[hash:base64:5]"
    localIdentName: isDev ? "[path]-[name]-[hash:base64:5]" : "[hash:base64:5]"
    //把css对应的类名，根据路径，文件名，文件内容的hsah生成一个独一无二的类名，调用是别的文件无法使用。
    camelCase: teue//js命名方式，把css中带中划线的转换成驼峰命名。给使用的style标签添加module属性,原有css类修改:class="$style.mainHeader"

    //外部css的使用：
    在css-loader中配置，把css-loader变成一个对象
    {
        loader: "css-loader",
        options: {
            module: true,
            localIdentName: isDev ? "[path]-[name]-[hash:base64:5]" : "[hash:base64:5]"
        }
    }

    import className from "../../xx.styl";

    <div id="className.xxx"></div>
}

selint

防止代码低级出错，团队协作统一性。使用eslint-config-standard的规范，它有依赖了很多的包

安装：

npm install eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

在项目文件下创建.eslintrc文件：

{
    "extends": "standard",//使用标准规则
    //使用之后用eslint校验代码，但没有办法识html中js的代码，安装eslint-plugin-html -D识别html中的js代码
    "plugins": [
        "html"
    ],
    //在json中配置script
    "parser": "babel-eslint"//babel处理
}

"script": {
    "lint": "eslint --ext .js .jsx .vue client/",
    "lint-fix": "eslint --fix --ext .js .jsx .vue client/",
    //fix自动修复
    //每次修改代码会自动检查。安装eslint-loader babel-eslint -D添加parser属性在base.js中配置loader在rules中添加对象：
    {
        test: /\.(vue|js|jsx)$/,
        loader: "eslint-loader",
        esclude: /node_modules/,
        enforce: "pre"//预处理，以上文件在使用vue-loader加载之前都会通过eslint-loader检测，post之后预处理。
    }
}

editorConfig规范编辑器的配置

编译器插件，在编译器插件中自行安装

新建editorConfig,在不同的编辑器安装此插件，让不同的编辑器在使用这个项目编辑的时候使用相同的配置。

root = true//都当这个文件就行，不用往上层读
[*]//所有的文件规定规范
charset = utf-8
end_of_line = lf
indent_size = 2
index_style = space
insert_final_newline = true//保存文件末尾自动添加空行，eslint规范每个页面最后一行为空行
trim_trailing_whitespace = true//去掉多余的空格

precommit检测代码

git提交时，使用precommit插件，如果代码检查不符合eslint不能提交。git commit时自动调用precommit,检测代码。不通过，无法提交。

安装：husky包

npm install husky -D

会自动在项目文件下生成.githock文件，读取config文件中的内容，在srcipt添加脚本。

"precommit": "npm run lint-fix"

webpack的升级

卸载所有相关webpack及插件。

npm uninstall webpack webpack-dev-server webpack-merge -D

安装即可：

npm install webpack webpack-dev-server webpack-merge webpack-cli

webpack-cli 4以上在命令行启动的部分脚本在webpack-cli上。

其他的包也是卸载安装升级

@next没有发布的下一个包

修改配置：在base中添加mode

const config = {
    mode: process.env.NODE_ENV || "production ",//development || "production",

}

client.js中修改，删掉CommonChunkPlugin

optimization: {
    splitChunks: {
        chunks: "all"//删除vender
    },
    runtimeChunk: true
}
//开发时的配置：
devtool
new webpack.NoEmitOnErrorsPlugin()
删除