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;