1 安装加载器 Loader
[ahcj@localhost learn-webpack]$ npm install --save-dev css-loader style-loader
[ahcj@localhost learn-webpack]$ npm install --save-dev less less-loader
[ahcj@localhost learn-webpack]$ npm install --save-dev node-sass sass-loader
2 修改webpack.config.js,添加 module 配置项目
module.exports = {
devtool: 'source-map', //在一个单独的文件中产生一个完整且功能完全的source map
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
port:8080, //默认监听端口，如果省略，默认为”8080“
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
}
}
3 新增 css 文件
app/greet.css
.box {
color: blue;
background-color: red;
padding: 10px;
border: 3px solid #ccc;
opacity: 0.5;
margin: 100px;
}
4 新增 less 文件
app/main.less
@base: #f938ab;
html,body {
background:@base;
}
5 运行
[ahcj@localhost learn-webpack]$ npm run serve
屏幕截图.png
