美文网首页
ES6 + stylus + zepto.js + webpac

ES6 + stylus + zepto.js + webpac

作者: 漫漫江雪 | 来源:发表于2019-01-16 14:20 被阅读0次

    ES6 + stylus + zepto.js + webpack4.x 项目示例

    在线预览 (chrome浏览器下F12切换到手机模式)
    源码地址

    image.png

    项目步骤

    1. yarn add swiper zepto

    2. 起先是想用js引入的方式直接写

    还是练习一下webpack的使用以及ES6 import模块化加载的方式
    yarn add webpack webpack-cli

    3. 安装webpack的基本loader

    yarn add -D style-loader css-loader file-loader stylus stylus-loader url-loader

    4. 添加webpack.config.js并配置

    const path = require('path')
    
    module.exports ={
        entry: {
            index: './src/index.js'
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname,'dist')
        },
        module: {
            rules:[
                {test: /\.css$/, use: ['style-loader','css-loader']}
            ]
        }
    }
    

    5. 安装 webpack的插件 (html-webpack-plugin和clean-webpack-plugin)

    yarn add -D html-webpack-plugin clean-webpack-plugin

    在html中使用配置项的值
    <%= htmlWebpackPlugin.options.title %>
    
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    
    plugins: [
            new CleanWebpackPlugin(['dist']),
            new HtmlWebpackPlugin({
                title: '首页',
                template: 'index.html'
            })
        ]
    

    6. 使用ES6来写

    • 参考: babel中文网
    • yarn add -D babel-core babel-loader --这种方式安装的bable-loader是8.x版本,而babel-core是6.x-对应的babel-loader需要@7版本
    • npm uninstall babel-loader --先移除最新版,再安装@7版本
    • yarn add -D babel-loader@7 --上面安装的babel-core是6.x版本要使用7.x版本的babel-loader
    • 安装 preset
      • yarn add -D babel-preset-env
    • 配置webpack module->rules
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    
    创建 .babelrc 配置文件
    {
        "presets": ["env"]
    }
    

    7. 因为zepto不是commonjs规范, 在模块化使用时需要特殊处理

    webpack.config.js中需要配置如下 rules

    {
        test: require.resolve('zepto'),
        loader: 'exports-loader?window.Zepto!script-loader'
    },
    {
        test:/node_modules\/zepto\/src\/\*.js/,
        loader: 'exports-loader?!script-loader'
    }
    
    plugins:
    new webpack.ProvidePlugin({
        $: 'zepto',
        Zepto: 'zepto'
    }),
    

    使用之处:

    import $ from 'zepto'
    import zeptoEvent from 'zepto/src/event.js'
    import zeptofx from 'zepto/src/fx.js'
    import zeptofxMethod from 'zepto/src/fx_methods.js'
    import zeptoTouch from 'zepto/src/touch.js'
    

    8. package.json的scripts中添加打包脚本

    "build":"webpack --confg webpack.config.js"

    9. 配置webpack开发环境

    • webpack.config.js中开启sourcemap
      devtool: 'inline-source-map',
    • 安装 webpack-dev-server
      • yarn add -D webpack-dev-server
      • webpack.config.js中加入devServer的配置 hot:true是启用hotmodulereplacement
        devServer: {
            contentBase: './dist',
            hot: true
        },
        
      • package.json中增加启动脚本
        "start": "webpack-dev-server --mode=development --open",

    10. 因为项目中用到了静态资源(mp3音乐文件)

    直接用 copy-webpack-plugin 插件 把mp3文件复制到dist目录中
    安装:yarn add -D copy-webpack-plugin
    webpack.config.js中使用

    const CopyWebpackPlugin = require('copy-webpack-plugin')
    
    const config = {
      plugins: [
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, 'src/assets/music'),
                to: path.resolve(__dirname, 'dist/music') 
            }
        ])
      ]
    }
    

    11. 将样式打包到css文件中(而不是link引入的)

    需要用到webpack的插件(webpack4.x之后的版本使用) mini-css-extract-plugin github地址

    1. 安装 yarn add -D mini-css-extract-plugin
    2. 在webpack.config.js文件中配置并使用
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");      // 把样式打包成文件只在生产环境下使用
    const devMode = process.env.NODE_ENV !== 'production'
    
    module.exports = {
      plugins: [
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: devMode ? '[name].css' : '[name].[hash].css',
          chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        })
      ],
      module: {
        rules: [
            {test: /\.css$/, use: [
                devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                'css-loader'
            ]},
            {test: /\.styl$/, use: [
                devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                'css-loader','stylus-loader'
            ]}
        ]
      }
    }
    
    1. 上面的配置中要修改process.env.NODE_ENV的值为production,所以安装 cross_env yarn add -D cross-env 参考:https://www.cnblogs.com/usebtf/p/9912413.html
      接着 配置打包生产环境的脚本 "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
    2. 执行 npm run build可以看到样式被单独打包到了一个 css中
    3. 把所有的样式打包进一个样式文件中(经实践,我发现上面已经只有一个样式文件),还是按文档来, 为 webpack.config.js增加
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$|\.styl$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    
    1. 上面虽然把样式打包到了一个样式文件中,但样式是没有压缩的, webpack4需要安装插件 optimize-css-assets-webpack-plugin js压缩使用 uglifyjs-webpack-plugin
      yarn add -D optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin 安装之后在webpack.config.js中使用
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
    const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
    
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$|\.styl$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        },
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    

    经过上面的步骤,本以为大功告成了,npm run build打包的时候出错:
    swiper4.x打包uglify压缩时dom7错误
    通过网上一番搜索,大致的原因是 swiper4.x或者dom7中使用了es6的语法, 而uglify压缩js不能有es6语法,所以报错,解决办法就是将swiper和dom7先用babel-loader解析(变成了es5),
    然后再压缩就不会报错了, 修改 webpack.config.js

    // 一般的写法是这样的  {test: /\.js$/, exclude:/node_modules/, use: ['babel-loader']},
    {test: /\.js$/, include:[path.resolve(__dirname,'src'),path.resolve(__dirname,'node_modules/swiper'),path.resolve(__dirname,'node_modules/dom7')], use: ['babel-loader']},
    

    相关文章

      网友评论

          本文标题:ES6 + stylus + zepto.js + webpac

          本文链接:https://www.haomeiwen.com/subject/wilmdqtx.html