1. 入口文件
对于入口文件下面几种表述方式
官网参考
// 方式一
module.exports = {
entry: './src/main.js'
}
// 等价于 推荐这种方式
module.exports = {
entry: {
main: './src/main.js'
}
}
// 多个入口文件
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
}
2. 解析less文件
在webpack.config.js文件中配置rules
module.exports = {
entry: './src/main.js',
module: {
rules: [
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
]
}
}
根据上述的配置文件可以知道,我们需要在package.json
文件中引入style-loader, css-loader,less-loader
;需要注意的是style-loader
需要放在dependencies
中,而style-loader,css-loader
只需放在devDependencies
中即可
注:如果想在vue的js文件中引入一个less文件需要写成
require('!style-loader!css-loader!less-loader./less/common.less')
要使用less语法,需要在style上添加lang='less'
3. 使用babel-loader
module.exports = {
...
modules: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
// 排除 node_modules下的文件
exclude: '/node_modules'
}
]
}
}