Webpack-Babel-Autoprefixer-cli

Webpack

webpack是目前最流行的打包工具，我是在项目完成后才开始引入webpack，方法可能不适合其他人

安装

npm install -g webpack 

配置

新建 webpack.config.js

module.export = {
 entry: './js/app.js',              //入口文件
 output: {
    filename: 'dist/app.js'         // 输出文件
    }
}

运行

运行 webpack 命令生成 dist/app.js 开发期间可运行 webpack-w 保存代码的同时打包文件

$ webpack

引入打包后的脚本

<script type="module" src="script/app.js"></script>      <!--支持ES6语法的浏览器-->
<script nomodule src="dist/app.js"></script>             <!--不支持ES6语法的浏览器-->

Babel

使用babel将ES6代码转成ES5代码

安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

安装完成后 package.json 文件里会多一个这个配置

image.png

配置

在webpack.config.js中添加一个模块

module: {
  rules: [
    {
      test: /\.m?js$/,                                  // 匹配.js文件
      exclude: /(node_modules|bower_components)/,       // 忽略文件夹
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

运行

配置完成以后，命令行运行webpack就可以了

也可以运行 webpack -p 压缩js文件

可以在package.json文件里添加

"scripts": {    "dist": "webpack"  }

这样命令行运行npm run dist也同样会运行webpack

 node-sass --output-style compressed scss/app.scss > app.css

运行这个命令会把scss文件转化为css文件并压缩，转化后要注意更改html里的引用文件。

可以把两次编译放在一起

"scripts": {    
    "dist": "node-sass --output-style compressed scss/app.scss > dist/app.css && webpack -p"  
}

这样运行命令npm run dist。他就会先编译scss文件在编译js文件。

个人觉得使用命令行编译scss文件比用webpack编译好太多了，一行搞定多好，避免webpack各种奇葩报错

Autoprefixer-cli

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的

安装

npm install --global autoprefixer-cli

运行

autoprefixer-cli -o dist/app.css dist/app.js         //覆盖自己

前缀加好了，既然这行代码这么好用，那我们把他放和编译放在一起

"scripts": {    
    "dist": "node-sass --output-style compressed scss/app.scss > dist/app.css 
    && autoprefixer-cli -o dist/app.css dist/app.css 
    && webpack -p"  
}

现在只要运行 npm run dist 就能一步到位