React、Vue项目上线的改善

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/focusdroid/article/details/78245761

React、Vue项目上线前的那些事儿

1. 直接使用项目中的东西进行打包

var path = require('path');//引入处理路径path模块
var htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')//每次编译删除dist目录
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");//引入抽离css的插件(将css文件抽离出来的插件)
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css文件的插件

module.exports = {
    // entry:path.resolve(__dirname, 'src/js/main.js'),
    entry: {
        app: path.resolve(__dirname, 'src/js/main.js'),//自己代码的入口
        vendors:['jquery'] //第三方包的入口
    },
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[//配置相关loader的匹配规则
        //处理ES6语法的loader（babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-plugin-transform-runtime）
                //需要新建一个.babelrc的文件
            //{test:/\.css$/, use:['style-loader', 'css-loader']},//处理相关的css文件
            {test:/\.css$/, use:ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })},//处理相关的css文件
            //{test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},//处理相关的scss文件（sass-loader  node-sass）
            {test:/\.scss$/, use:ExtractTextPlugin.extract({
                fallback: 'style-loader',
                //resolve-url-loader may be chained before sass-loader if necessary
                use: ['css-loader', 'sass-loader']
              })},
     //处理相关的scss文件（sass-loader  node-sass）
    //处理相关的图片和图片路径问题(name=images/[hash:7].[ext])在github的file-loader中查找
            // {test:/\.(jpg|png|gif|bmp|jpeg)/, loader:'url-loader?limit=100&name=images/[name].[ext]'},
            {test:/\.(jpg|png|gif|bmp|jpeg)/, loader:'url-loader?limit=100&name=[name].[ext]'},

            //将高级的js语法转换成低级语法（babel-loader babel-core babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0）
            //通过exclude排除node_modules，，一定要排除会报错
            {test:/\.js$/, use:'babel-loader', exclude:/node_modules/},

        ]
    },
    plugins:[
        /* new webpack.HotModuleReplacementPlugin(), //确保浏览器热更新时不出错
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),
            filename:'index.html'
        }),      发布版本时删除*/
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),
            filename:'index.html',
            minify:{
                collapseWhitespace:true,//合并空白字符
                removeComments:true,//移除注释
                removeAttributeQuotes: true,//移除多余引号

            }
        }),
        new CleanWebpackPlugin(['dist']),//创建一个删除文件夹，把dist，目录传进去(使用npm的clean-webpack-plugin插件)
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', //指定公共模块的名称
            filename:'vendors.js' //指定抽取出来的文件的真实名称
        }),
        new webpack.optimize.UglifyJsPlugin({//创建JS代码压缩的插件
            compress:{//压缩的意思
                warnings: false //移除警告信息
            }
        }),
        new webpack.DefinePlugin({//设置产品上线环境， 进一步压缩代码(效果不明显)
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        //(从bundle.js中将css文件抽离出来)npm install --save-dev extract-text-webpack-plugin
        //new ExtractTextPlugin("css/styles.css"),//可以这样写只是创建一个css文件夹（原来的写法new ExtractTextPlugin("styles.css"),）
        new ExtractTextPlugin('css/style.css'),

        //压缩css文件的插件
        // new ExtractTextPlugin("styles.css"),
        new OptimizeCssAssetsPlugin({
          //可以删除不适用，不删除也没事
          /* assetNameRegExp: /\.optimize\.css$/g,//有也行没有也行
          cssProcessor: require('cssnano'),
          cssProcessorOptions: { discardComments: {removeAll: true } },
          canPrint: true */
        }),
    ]
}

关于export和export default的区别

> 1.- -export default导出的可以自定义接收
    - - -export导出的和使用的名称必须一致
> 2.- -使用export default使用名称接收
    - - - 使用export必须用{ }来接受，顺序任意（可以按需接收）
> 3.- -export default导出一个对象
        - - - export导出多个
        -

邮箱：[email protected]