码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-17 18:21:11      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:develop   dex   pac   file   开发   bundle   webp   path   mode   

  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;

  

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

标签:develop   dex   pac   file   开发   bundle   webp   path   mode   

原文地址:https://www.cnblogs.com/janken/p/11369370.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!