自己从npm init开始搭建webpack+vue+less+typescript+elementui，但是，按官网给的方法按需引入elementui，发现样式没有引入，elementui的语言支持和内置的动画都引入不了，这些都是在ts文件里面引的，找到网上有类似的问题说的那些错误我都没有，倒是有一个很类似，在这，改来改去还是不行，但是样式这样引入却能引进来：
import 'element-ui/lib/theme-chalk/index.css';
但是这样不是按需引入啊，各位大神帮忙看一下，感激不尽！
这是webpack.common.js
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: path.resolve(__dirname, '../src/main.ts')
},
output: {
path: path.resolve(__dirname, '../dist')
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new webpack.ProgressPlugin({
entries: true,
modules: true,
modulesCount: 100,
profile: true
// handler: (percentage, message, ...args) => { }
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.html'),
favicon: path.resolve(__dirname, '../public/favicon.ico'),
filename: 'index.html',
inject: true // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
})
],
module: {
rules: [{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}, {
test: /.vue$/,
exclude: /node_modules/,
loader: 'vue-loader'
}, {
test: /.(tsx|ts)$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/.vue$/]
}
}]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.vue', '.css', '.less', '.json', '.ts']
}
};
这是webpack.dev.js：
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
stats: 'minimal',
output: {
filename: 'javascript/[name].js'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
new MiniCssExtractPlugin({
filename: 'style/[name].css',
chunkFilename: 'style/[id].css',
ignoreOrder: false
})
],
optimization: {
namedModules: true,
minimize: false
},
module: {
rules: [{
test: /.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf|ico|pub)$/i,
use: [{
loader: 'file-loader',
options: {
outputPath: 'images',
publicPath: '../images',
name: '[name].[ext]'
}
}]
}, {
test: /.(css|less)$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, '../dist'),
hmr: process.env.NODE_ENV === 'development'
}
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}, {
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
noIeCompat: true
}
}
}, {
loader: 'style-resources-loader',
options: {
patterns: [path.resolve(__dirname, '../src/assets/css/base/global.less')]
}
}
]
}]
},
devServer: {
contentBase: path.resolve(__dirname, '../dist'),
// compress: true,
port: 9002,
host: '0.0.0.0',
index: 'index.html',
headers: {
'X-Custom-Foo': 'bar'
},
// https: true,
// inline: true,
// lazy: false,
// noInfo: true,
open: true,
overlay: true,//编译运行时的错误直接显示在浏览器
// proxy: [{
// context: ['/tests'],
// target: 'http://localhost:3000',
// secure: false
// }],
// quiet: false,
useLocalIp: true
}
});
