美文网首页
前端工程化-Sass,Babel,Webpack

前端工程化-Sass,Babel,Webpack

作者: 饥人谷_傅里叶子 | 来源:发表于2018-07-02 18:46 被阅读0次

    目录结构

    src 未编译的文件,就是用自己喜欢的语言编写
    dist 通过工具翻译的文件
    vendor 第三方的文件

    sass

    scss ······> css文件
    github:node-sass

    babel

    js(ES6) -----> js(兼容ES5,IE浏览器)
    babel 使用

    watch-cli

    为了能够使得监听html文件跟图片文件夹。
    github:wartch-cli

     watch -p "src/img/**" -c "cp -r src/img/ dist/img"
    

    其他需求

    前端的CSS,JS文件缓存一般都做了10年,所以会希望能够有工具自动添加一个版本号,如果出现修改,希望能自动更改版本号。(详情请了解Cache-Control)


    image.png

    发展历程

    grunt ····> gulp ·····> webpack
    这些工具都是为了能够统一上述所有工具诞生的。


    语言太多

    webpack

    所有的东西都是模块,不管是js还是css文件。
    为了css样式兼容不同版本的浏览器,自动化加前缀工具 --- autoprefixer(现在是postcss)
    webpack
    上面是webpack的安装配置教程,其实只用看webpack.config.js文件就好。
    如果想要sass---->css,下载sass-loader;
    兼容的js文件,下载babel-loader,这里要注意一个版本的问题:

    //webpack 3.x | babel-loader 8.x | babel 7.x webpack如果是4的话,安装这个
    
    npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack
    //webpack 3.x babel-loader 7.x | babel 6.x
    
    npm install babel-loader babel-core babel-preset-env webpack
    

    然后修改相应的配置即可。

    模块化
    在webpack里面,所有的东西都是模块,包括css,图片等

    const path = require('path');
    
    module.exports = {
      entry: './src/js/main.js',  //一个入口,将所有的模块都在这里导入
      output: {
        filename: 'bundle.js',   //生成的最终js文件
        path: path.resolve(__dirname, 'dist/js') // 存储的路径
      },
        module: {
                rules: [
                {
                    test: /\.scss$/,
                    use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                    ]
                },  //这个规则是sass文件
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'babel-loader',
                      options: {
                        presets: ['@babel/preset-env']
                      }
                    }
                  }  //这个规则是babel
                ]
            }
    };
    

    在面main.js文件中,用下述语法进行导入

    import x from "./module-1" //导入一个js函数,命名为x
    import "../css/default.scss"  //导入一个scss文件
    

    相应的在module-1.js文件中,需要做导出

    function fn(){
        console.log(1);
    }
    
    export default fn
    

    这样就把fn函数导出了。
    最后由webpack将这些进行打包,生成bundle.js

    相关文章

      网友评论

          本文标题:前端工程化-Sass,Babel,Webpack

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