1.0.0 • Published 5 years ago

webpack4-vue2-project-template v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

webpack4 sass babel vue2 标准工程模板 但是，webpack4还是需要n多优化部分，配置下来，实为不易。而实际开发也不需要浪费这个时间——了解即可

webpack 一直以来最饱受诟病的就是其配置门槛极高，配置内容极其复杂和繁琐，容易让人从入门到放弃，而它的后起之秀如 rollup、parcel 等均在配置流程上做了极大的优化，做到开箱即用，所以webpack 4 也从中借鉴了不少经验来提升自身的配置效率。愿世间再也不需要 webpack 配置工程师。

启动:

npm run start

打包：

npm run build

目录结构

团队规范

遵从平台发布前端规范标准，节选以下要点：

命名规范

遵从Camel命名

变量命名规范：

js规范，请遵从eslint

  • 常量全部大写，单词间下划线分隔
  • 类采用Pascal命名

scss 规范

  • css 按照工程结构 嵌套书写，嵌套层级不超过三层——采用 @at-root
  • 非页面引用scss文件，加前缀 _ 如：_fun.scss _mixin.scss

构建过程 节选关键步骤

构建目录初始化

mkdir yourFileName
cd yourFileName

根据工程目录结构，构建相关文件 ……

npm init 
npm install webpack webpack-cli  --save-dev
注：--save-dev和--save的区别：

development很明显就是我们开发所需要的依赖包，而打包好上线的话是不需要这些包的，一来各种包加起来太大，二来它只是我们开发提高效率的工具而已； 由于本工程只在本地跑，最终还是sftp自动dist 到服务器，所以暂略

修改package.json ,npm run dev 检查打包结果

{
 "scripts": {
   "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }
}
注：webpack4只需要一个--mode选项 指定 production||development

参考http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html +如果是并行执行（即同时的平行执行），可以使用&符号。 +如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。 npm run script1.js & npm run script2.js npm run script1.js && npm run script2.js

配置webpack配置文件 webpack.config.js

rule对象参数说明
  • test: A condition that must be met 必须满足的条件
  • exclude: A condition that must not be met 不能满足的条件
  • include: A condition that must be met 必须满足的条件
  • loader: A string of “!” separated loaders 用 “！”分割loaders
  • loaders: An array of loaders as string loaders的字符串数组

基础loader

npm install  css-loader style-loader  html-loader url-loader file-loader --save-dev
    [
                   {
                       test: /\.html$/,
                       use: 'html-loader'
                   },
                   {
                       test: /\.css$/,
                       use: [
                           {
                               loader: 'style-loader',
                               options:{
                                   // singleton:true //处理为单个style标签
                               }
                           },
                           {
                               loader: 'css-loader',
                               options:{
                                   // minimize:true //压缩css
                               }
                           }
                       ]
                   },
                   {
                       test:/\.(png|jpg|jpeg|gif)$/,//图片处理
                       use:[
                           {
                               loader: 'url-loader',
                               options:{
                                   limit:2048,
                                   name:'[name][hash].[ext]'
                               }
                           },
                           {
                               loader: 'file-loader',
                               publicPath:publicPath,
                               outputPath: 'dist/',
                               useRelativePath: true
                           }
                       ]
                   },
                   {
                       test: /\.(woff|woff2|eot|ttf|otf)$/,//字体处理
                       use: ['url-loader']
                   },

    ]

配置babel 编译js

npm install --save-dev  babel-loader @babel/core  @babel/preset-env 
    [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/ //设置node_modules里的js文件不用解析
        }
    ]

参考：https://segmentfault.com/a/1190000010468759

babel7.0后，需要@ @babel/core vs babel-core babel插件和版本需要对应上，不然掉坑 参考https://www.w3ctech.com/topic/2150 babel-preset-es2015 babel-plugin-transform-runtime babel-plugin-add-module-exports babel-plugin-transform-runtime babel-plugin-transform-class-properties

配置eslint 检查

npm install --save-dev  eslint eslint-loader babel-eslint eslint-plugin-react   eslint-plugin-vue 
[
   {//eslint 检查
      test: /\.(js|jsx)$/,
      enforce: 'pre',
      loader: ['eslint-loader'],
      exclude: /node_modules/ //设置node_modules里的js文件不用解析
    },
]

增加.eslintrc配置

其实没有多大必要，intellij 会自动检车eslint

处理html

npm install html-webpack-plugin 

    new HtmlWebpackPlugin({
            filename: './index.html',//输出文件
            template: 'src/index.html',//模板文件
            inject: 'body',//插入位置
            chunks: ['index'],
            hash: true,
            minify: {
                caseSensitive:false,
                removeComment:true,//移除注释
                collapseWhitespace:false//移除多余空格
            }
        })

处理图片 - 压缩图片

参考：http://shirmy.me/2018/05/15/webpack-图片、文件处理/

npm install image-webpack-loader --save-dev 
    [
        {
            test: /\.(png|jpg|jpeg|gif)$/i,//图片处理
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 0,//图片不转base64，增加css的阻塞时间，开启http2，所以也不用雪碧图
                        name: '[name].[hash:5].[ext]',
                    }
                },
            ]
        },
        {//压缩图片
            loader: 'image-webpack-loader',
            options: {
                bypassOnDebug: true,
            }
        },
    ]

配置webapck server

npm install webpack-dev-server open --save-dev

参看 webpack.server.js 注释

"start": "node webpack.server.js", npm start 启动项目

配置css优化设置

npm install --save-dev postcss-loader autoprefixer postcss autoprefixer  mini-css-extract-plugin
注：
  • webpack4已经废弃 extract-text-webpack-plugin 这个插件了，现在使用的是 mini-css-extract-plugin
  • 在项目根目录新建postcss.config.js文件，并对postcss进行配置：
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: [
                "> 1%",
                "last 5 versions",
                "not ie <= 9",
                "ios >= 8",
                "android >= 4.0"
            ]
        }
    }
};

不然会报出：Error: No PostCSS Config found

自动消除冗余的css代码

npm install --save-dev  optimize-css-assets-webpack-plugin
个人觉得css压缩优化空间不大，nginx开启gzip的情况，很有限，有点画蛇添足

配置sass

npm install --save-dev  node-sass sass-loader

webpack构建优化

多线程 happypack

npm install --save-dev  happypack

配置第三方包，比如jquery

npm install imports-loader --save-dev
[
    {
        loader: 'imports-loader',
        options: {
            // 模块为 value，同样webpack也会解析它，如果没有则从alias中解析它
            $: 'jquery'
        }
    }
]

增加manifest.json 配置，缓存校对下载, 增加js integrity 安全校验

npm install --save-dev webpack-subresource-integrity webpack-assets-manifest

两个插件准备写成一个，看来不到春节没有时间

增加webpack 模块分析

npm install --save-dev webpack-bundle-analyzer

配置参看 webpack.analy 参考文章：https://www.cnblogs.com/ssh-007/p/7944491.html

增加上传至服务器

npm install --save-dev webpack-sftp-client

配置vue

npm install --save-dev vue vue-router vue-loader vue-template-compiler vue-style-loader  
    [
        {
            test: /\.vue$/,
            use: 'vue-loader'
        },
    ]

webpack 相关优化，可参看：https://www.zhoulujun.cn/html/tools/webpack/2016_0218_7492.html

webpack4sassvue2project
@everything-registry/sub-chunk-3133@infinitebrahmanuniverse/nolb-webpack4
1.0.0

5 years ago