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]