• webpack4构建vue项目

    安装 webpack、vue

    npm i webpack webpack-cli -D

    npm i vue vue-router -S

    在项目根目录创建build文件夹，然后创建3个分别是webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js文件,存放基础配置与开发、生产环境的配置。

    项目目录如下图：

    打开src/router/index.js 文件，配置”登录页面“路由：

     1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 
 4 Vue.use(VueRouter)
 5 
 6 import login from '../views/login/login.vue'
 7 
 8 export default new VueRouter({
 9     routes: [{
10         path: '/',
11         name: 'login',
12         component: login,
13         meta: {
14             title: '登录'
15         }
16     }]
17 })

    src/index.html添加如下代码：

     1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset='utf-8'>
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="renderer" content="webkit|ie-comp|ie-stand">
 7     <title></title>
 8 </head>
 9 <body>
10     <div id="app" v-cloak>
11         <router-view></router-view>
12     </div>
13 </body>
14 </html>

    src/index.js添加如下代码：

    1 import Vue from 'vue'
2 import router from './router/index.js'
3 
4 new Vue({
5     el: '#app',
6     router
7 })

    src/build/webpack.base.conf.js配置代码如下：

     1 const webpack = require('webpack')
 2 const path = require('path')
 3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4 const HtmlWebpackPlugin = require('html-webpack-plugin')
 5 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 6 
 7 const isDev = process.env.NODE_ENV === 'production'
 8 
 9 let pluginsConfig = [
10     new VueLoaderPlugin(),
11     new HtmlWebpackPlugin({
12         title: 'my App',
13         template: path.join(__dirname, '../src/index.html')
14     }),
15     new webpack.DefinePlugin({
16         'process.env': {
17             'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
18         }
19     })
20 ]
21 if (!isDev) {
22     pluginsConfig = pluginsConfig.concat(new MiniCssExtractPlugin({
23         filename: "css/[name]_[contenthash].css"
24     }))
25 }
26 
27 module.exports = {
28     mode: process.env.NODE_ENV || 'production',
29     entry: path.join(__dirname, '../src/index.js'),
30     output: {
31         filename: 'bundle.js',
32         path: path.join(__dirname, '../dist')
33     },
34     module: {
35         rules: [{
36                 test: /.vue$/,
37                 loader: 'vue-loader'
38             },
39             {
40                 test: /.scss$/,
41                 use: [
42                     isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
43                     {
44                         loader: 'css-loader',
45                         options: {
46                             modules: true,
47                             localIdentName: '[local]_[hash:base64:8]'
48                         }
49                     },
50                     'sass-loader'
51                 ]
52             },
53             {
54                 test: /.(png|jpg|gif)$/,
55                 loader: 'url-loader?name=images/[name]-[contenthash:5].[ext]&limit=2000'
56             }, {
57                 test: /.js$/,
58                 loader: 'babel-loader?cacheDirectory',
59                 exclude: '/node_modules/',
60                 include: path.resolve(__dirname, '../src')
61             }
62         ]
63     },
64     plugins: pluginsConfig,
65     resolve: {
66         alias: {
67             'vue$': 'vue/dist/vue.esm.js'
68         }
69     }
70 }
    View Code

    先安装解析.vue文件的loader及vue模版编译器：npm i vue-loader  vue-template-compiler -D

    参考链接：https://vue-loader.vuejs.org/guide/#manual-configuration、https://vue-loader.vuejs.org/options.html#compileroptions、

    https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6

    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    module:{
    　　rules:[
    　　　　{
    　　　　　　test:/.vue$/,
    　　　　　　loader:'vue-loader'
    　　　　}
    　　]
    },
    plugins:[
    　　new VueLoaderPlugin()
    ],
    resolve:{
    　　alias:{
    　　　　'vue$':'vue/dist/vue.esm.js'
    　　}
    }

    安装html-webpack-plugin插件：npm i html-webpack-plugin -D

     new HtmlWebpackPlugin({
     title: 'my App',
         template: path.join(__dirname, '../src/index.html')
     })

    参考链接：https://github.com/jantimon/html-webpack-plugin#

    安装 cross-env （跨平台设置环境变量）：npm i cross-env -D

    参考链接：https://www.npmjs.com/package/cross-env

    使用scss CSS预处理器，安装sass-loader：npm i sass-loader  node-sass css-loader vue-style-loader -D

    将CSS 提取到单独文件中：npm i mini-css-extract-plugin -D
    CSS添加浏览器供应商前缀：npm i postcss-loader autoprefixer -D
    

      const isDev = process.env.NODE_ENV === 'development'
    

    

      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    

    

      const pluginsConfig=[]
    

      //生产环境才启用此插件，开发环境启用了，热更新会失效
    

    

      if(!isDev){
    

    　　　pluginsConfig = pluginsConfig.concat(new MiniCssExtractPlugin({
    

    

    　　　　　　filename: "css/[name]_[contenthash].css"
    

    

    　　　}))　
    

      }
    

    

    {
    　　test:    /.scss$/,
   use:[
       isDev?'vue-style-loader': MiniCssExtractPlugin.loader,
       {
           loader: 'css-loader',
           options:{
               modules:true,
               localIdentName: 'purify_[local]_[hash:base64:8]'
               }
    

           },
           {
               loader: 'postcss-loader',
               options:{
    　　　　　　　　sourceMap: isDev ? true: false
               }
           },
    　　　　'sass-loader',
   ]      
}    
    

    

     参考链接：https://vue-loader.vuejs.org/guide/pre-processors.html#sass-vs-scss
    

    项目根目录创建postcss.config.js文件，配置如下：
    

    

    module.exports = {
    loader: 'postcss-loader',
    plugins: [
        require('autoprefixer')
    ]
}
    

    

    参考链接：https://github.com/ecmadao/Coding-Guide/blob/master/Notes/CSS/PostCSS%E9%85%8D%E7%BD%AE%E6%8C%87%E5%8C%97.md
    

    处理图片资源：npm i url-loader -D
    

    

     {
     test: /.(png|jpg|gif)$/,
     loader: 'url-loader?name=images/[name]-[contenthash:5].[ext]&limit=2000'
 },
    

    

    使用babel处理JS文件：npm i @babel/core babel-loader -D
    

    

    {
     test: /.js$/,
     loader: 'babel-loader?cacheDirectory',
     exclude: '/node_modules/',
     include: path.resolve(__dirname, '../src')
}
    

    

    处理JS新语法变换：npm i @babel/preset-env -S
    

    处理JS新函数：npm i @babel/plugin-transform-runtime -D 　npm i @babel/runtime -S
    

    删除所有console.*输出：npm i babel-plugin-transform-remove-console -D
    

    在项目根目录创建.babelrc文件，添加代码如下：
    

    

    {
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime", [
            "transform-remove-console",
            {
                "include": ["error", "warn"]
            }
        ]
    ]
}
    

    

     参考链接：https://babeljs.io/docs/en/
    

     src/build/webpack.dev.conf.js配置代码如下：
    

    

    

     1 const webpack = require('webpack')
 2 const path = require('path')
 3 const WebPackBaseConfig = require('./webpack.base.conf.js')
 4 const CleanWebpackPlugin = require('clean-webpack-plugin')
 5 const WebPackMerge = require('webpack-merge')
 6 
 7 module.exports = WebPackMerge(WebPackBaseConfig, {
 8     devtool: 'inline-source-map',
 9     devServer: {
10         contentBase: path.join(__dirname, 'dist'), //告诉服务器从哪个目录中提供内容
11         compress: true, //启用 gzip 压缩
12         port: 9000, //端口号
13         host: '0.0.0.0', //默认是 localhost。如果希望服务器外部可访问,则设置为0.0.0.0
14         hot: true //启用热替换模块  必须配置 webpack.HotModuleReplacementPlugin
15     },
16     plugins: [
17         new CleanWebpackPlugin(['dist']), //清理文件夹
18         new webpack.HotModuleReplacementPlugin(), //启用热替换模块
19         new webpack.NamedModulesPlugin() //启用HMR时,插件将显示模块的相对路径
20     ]
21 })
    

    
View Code
    

     开发服务器：npm i webpack-dev-server -D 
    

     清理文件夹：npm i  clean-webpack-plugin -D
    

    参考链接：https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server
    

    https://webpack.docschina.org/guides/output-management/#%E6%B8%85%E7%90%86-dist-%E6%96%87%E4%BB%B6%E5%A4%B9
    

    src/build/webpack.prod.conf.js配置代码如下：
    

    

    

     1 const webpack = require('webpack')
 2 const path = require('path')
 3 const WebPackMerge = require('webpack-merge')
 4 const WebPackBaseConfig = require('./webpack.base.conf.js')
 5 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 6 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 7 const glob = require('glob-all')
 8 const PurifyCSSPlugin = require('purifycss-webpack')
 9 
10 module.exports = WebPackMerge(WebPackBaseConfig, {
11     output: {
12         filename: '[name].js',
13         chunkFilename: '[name].[chunkhash:5].js',
14         path: path.resolve(__dirname, 'dist')
15     },
16     optimization: {
17         splitChunks: {
18             cacheGroups: {
19                 commons: {
20                     test: /[\/]node_modules[\/]/,
21                     name: 'vendors',
22                     chunks: 'all'
23                 }
24             }
25         },
26         runtimeChunk: true,
27         minimizer: [
28             new UglifyJsPlugin({
29                 cache: true,
30                 parallel: true
31             }),
32             new OptimizeCSSAssetsPlugin()
33         ]
34     },
35     plugins: [
36         new PurifyCSSPlugin({
37             paths: glob.sync([
38                 path.join(__dirname, '../src/')
39             ]),
40             purifyOptions: {
41                 whitelist: ['*purify*']
42             }
43         }),
44     ]
45 })
    

    
View Code
    

    JS 代码优化：npm i  uglifyjs-webpack-plugin -D
    

    

    optimization:{
    minimizer:[
      new UglifyJsPlugin({
         cache: true,
         parallel: true
      })
    ]
}
    

    

    参考链接：https://www.npmjs.com/package/uglifyjs-webpack-plugin
    

    CSS 代码优化：npm i  optimize-css-assets-webpack-plugin -D
    

    

    optimization:{
    minimizer:[
       new OptimizeCSSAssetsPlugin()
    ]
}
    

    

    参考链接：https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
    

    CSS Tree--shaking：npm i glob-all purify-css purifycss-webpack -D
    

    

     plugins: [
        new PurifyCSSPlugin({
            paths: glob.sync([
                path.join(__dirname, '../src/')
            ]),
            purifyOptions: {
                whitelist: ['*purify*']  
            }
        }),
    ]
    

    

    参考链接：https://www.npmjs.com/package/purifycss-webpack
    

    删除文件夹：npm i rimraf -D
    

    package.json scripts配置:
    

    

     "scripts": {
     "clean": "rimraf dist",
     "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.conf.js",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.conf.js",
     "start": "npm run clean && npm run build"
 }
    

    

      。。。。
    


    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              第三方插件处理 json数据的易错点
                
    C#  生成缩略图 方法
                
    javascript 数组的数据删除  splice() 的问题
                
    System.InvalidOperationException: 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序。
                
    C#单的二维码生成
                
    “System.NullReferenceException”类型的异常在 App_Web_j2s3gau3.dll 中发生，但未在用户代码中进行处理的Bug解决方案
                
    C#实现简单的邮件发送功能
                
    Python配置管理的几种方式
                
    Airflow 入门教程&示例
                
    pandas 使用 df.product 条件筛选报错Keyerror:False
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知