大前端搭建时常用的一些命令

　　cnpm install --save *****     //安装一个脚手架运行需要的中间件

       cnpm install --save-dev ****    //安装一个开发过程中依赖的中间件

　　rm -r -f **** //强制删除一个文件夹，多用于删除node_modules目录

　　webpack  //打包的指令

　　webpack-dev-server --open //启动测试服务，并打开浏览器

 

webpack常用的配置如下：

var path = require('path');

const config = {
    entry: "./src/index.tsx",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    devtool: 'source-map',
    mode: 'production', // 'production',//development
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [{
                test: /\.js$/,
                enforce: 'pre',
                exclude: /node_modules/,
                loader: 'source-map-loader'
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader'],
                exclude: /antd\/dist/
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            importLoaders: 1,
                            javascriptEnabled: true
                        }
                    }
                ]
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                // 小于8KB的图片使用base64内联
                test: /\.(png|jpg)$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=8192&name=/img/[hash].[name].[ext]'
            },
            {
                test: /\.(eot|woff|ttf|svg)$/,
                exclude: /node_modules/,
                loader: "file-loader?name=/iconfont/[hash].[ext]"
            },
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                loader: "file-loader?name=/js/[name].[ext]"
            }
        ]
    },
    devServer: {
        port: 9001,
        watchContentBase: true
    },
    externals: { //将react等中间件不打包到bundle中，开发中间件用
        // 'react': 'React',
        // 'react-dom': 'ReactDOM',
        // 'antd': 'antd'
    }
};
module.exports = config;