項目目錄結(jié)構(gòu)

目錄結(jié)構(gòu).png

• node_modules是依賴模塊放的地方，不必管（有些模塊的代碼里會有說明文檔，可以在node_modules里查看）
• src放源碼
• .babelrc是Babel插件的配置文件
• .gitignore是git的忽略配置，一般肯定會選擇忽略node_modules文件夾
• index.js是入口文件，webpack 從這里開始打包依賴
• package.json里邊有所有的依賴模塊的信息，還有npm的命令（script對象下的內(nèi)容）
• package-lock.json，鎖定初次安裝時的依賴版本
• postcss.config.js是postcss的配置文件
• template.html是模板html，用HtmlWebpackPlugin這個插件時必須的提供的文件
• webpack.*.config.js是webpack的配置文件，分為開發(fā)環(huán)境與生產(chǎn)環(huán)境兩個版本，其中共同的部分可以提取出來

webpack.config

/*
*
* config的組成部分
* 入口 從那個文件開始構(gòu)建
* 輸出 在哪里輸出打包好的bundles
* loader 如何處理非JS文件
* 插件 用以解決loader無法解決的問題
*
*/

/*
*  Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），
*  Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，
*  最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
*/

//使用插件，需要先在這里引用，例如
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    //entry可以簡寫成字符串的形式，也可以導入數(shù)組字符串，這種寫法缺少擴展性
    //entry: './index.js',
    //常用對象的寫法 entry: {[entryChunkName: string]: string|Array<string>}
    entry:{
        index: './index.js'
    },
    //即便存在多個入口起點，但只能有一個出口配置，一個配置可以產(chǎn)生多個出口文件
    //如果只輸出一個文件，也可以寫死文件名，下面這種寫法，會動態(tài)生成多個出口文件
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //這里的use也可以寫成
                // use: [
                //     'style-loader',
                //     'css-loader'
                // ]
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    //css自動補全插件
                    {loader: "postcss-loader"}
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            //字體文件 在css中用@font-face來引用的時候會被處理
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            //加載數(shù)據(jù)文件的配置，json是默認支持的
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    //webpackDevServer配置
    devServer: {
        contentBase: './dist',
        hot: true,
        //代理轉(zhuǎn)發(fā)請求的配置
        proxy: {
            '/': {
                target: 'http://10.11.115.19:8099',
                changeOrigin: true
            }
        }

    },
    //官方推薦的sourcemap開發(fā)時的最佳配置,eval-source-map功能最強性能最差，eval性能最好，功能最簡單,這個選項不可以在生產(chǎn)環(huán)境使用,有安全和性能問題
    devtool:'eval-source-map',
    //不要devtool和plugin同時使用,這里指對同一個插件
    plugins: [
        //html模板插件
        new HtmlWebpackPlugin({template: './template.html'}),
        //清理dist目錄插件
        new CleanWebpackPlugin(['dist']),
        //熱加載的配置
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]

}

//有關(guān)于package.json的注釋
//scripts: 這里是npm腳本,參數(shù)后邊的兩個中橫線代表傳遞給命令的參數(shù)
//devDependencies: 這里對應的命令是npm install --save-dev，這里的依賴只有在開發(fā)時有用
//dependencies: 這里對應的命令是npm install --save，這里的依賴將一直存在，項目上線時也會被打包

//.babelrc文件用于配置babel，這個JSON文件會使babel生效  https://babeljs.cn/docs/setup/#installation

babelrc配置

{
  "presets": ["env","react"]
}

postcss配置

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}