Webpack4入门2-添加less

发表于 | 分类于
Webpack4入门

使用less

less是一门css预处理语言，它是拓展了css，增加了变量，Mixin等等。使用less需要安装less服务，less-loader用来打包时用，想要将less正确解析成css当然还需要style-loader和css-loader。loader是webpack重要的功能之一，通过使用不同的loader，webpack可以使用外部脚本或工具处理不同格式类型的文件，如通过less-loader处理.less文件。

安装与配置

1
2
npm install less --save-dev
npm install style-loader css-loader less-loader --save-dev

webpack.config.js配置：

1
2
3
4
5
6
module: {
    rules: [{
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
    }]
}

然后将.less文件加载到入口文件里，如在入口文件里import '../less/topHead.less';这样就可以执行webpack把.less文件进行打包了。

webpack-dev-server热更新

使用热更新，当每次修改完代码保存后，不用手动的执行webpack打包命令，界面会自动更新。

　　要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载的。下载好后，需要在webpack.config.js中配置一下devServer。

1
2
3
4
5
6
7
8
9
10
devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:8090
}

参数

  • contentBase:配置服务器基本运行路径，用于找到程序打包地址。你的程序打包的出口目录是什么，就将“dist”换成什么
  • host：服务运行地址，这里使用本机IP，localhost。
  • compress：服务器端压缩选型，一般设置为开启。
  • port：服务运行端口，建议不使用80，很容易被占用，这里使用了8090.

最后在packege.json里的scripts里定义一下命令

1
2
3
"scripts": {
    "server":"webpack-dev-server"
 }

然后就可以执行npm server启动热更新服务了。当每次修改代码后就不用手动webpack打包了，只需要保存修改的文件即可。（注意：修改HTML时需要手动在浏览器中刷新）