webpack使用小记

1

webpack3.x在配置webpack.config.js时候不要写mode: 'development',该版本无法辨别此命令
以下为webpack3.x配置格式,也许与官网略有出入,但可以启动

module.exports = {    
    entry: './scripts/app.js',
    output: {
        filename: './dist/bundle.js'      
},
mudule:{
    ......
}

webpack4.x配置时候需要写mode: 'development',

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },
mudule:{
    ......
}

2

有时候配置webpack压缩css很苦,安装依赖也很苦,有一个省工的方法
如果你全局安装过的node-sass,你可以使用它来压缩css
在git bash或者终端输入 node-sass --output-style compressed scss已写完的文件夹 > 输出的css文件夹

3

假如你本地全局安装webpack4.x,但是你的项目安装的是webpack3.x,建议在package.json文件夹中"scripts"配置一个脚本便于本地启动低版本webpack

"start": "webpack --config webpack.config.js"
"start": "node_modules/.bin/webpack"

这两个命令都可以本地启动webpack
如果是webpack2.x建议看看官网文档再使用该命令

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容