webpack默认并不能处理js模块化的导入和导出,依赖于ts-loader和babel-loader
webpack.config,js
module.exports = {entry: './src/index.ts',output: {filename: 'main.js',},mode: 'development', // 或者 'production'module: {rules: [{test: /\.ts/,exclude: /(node_modules)/,use: 'ts-loader'}]},resolve: {// 确保webpack可以找到.ts和.tsx文件extensions: ['.tsx', '.ts', '.js']}
}
src/index.ts
import {util} from './b'let zhang: string = util()zhang += 'zhang'src/a.ts
export const util = () => {return 'util'
}
webpack默认并不能处理css模块化的导入和导出,依赖于css-loader
webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'main.js',},mode: 'development', // 或者 'production'module: {rules: [{test: /\.css/,exclude: /(node_modules)/,use: ['style-loader', 'css-loader']}]},
}
src/index.js
import './style.css'src/style.css
@import './module.css';
.body div {background-color: red;
}src/module.css
body {font-size: 28px;
}