React、Vue項目上線的改善

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]