webpack的簡單使用（commonJs與es6） webpack打包css和less

安裝webpack

 npm install webpack@3.6.0 -g

一個commonJs簡單實例

1 mathUtils.js

function add(num1,num2){
  return num1+num2
}
function mul(num1,num2){
  return num1*num2
}

module.exports = {
  add,
  mul
}

2 main.js

const {add,mul} = require("./mathUtils.js")
console.log(add(20,30))

3 生成bundle.js文件

 webpack ./src/main.js  ./dist/bundle.js

4 在index.html里引入

 <script src="./dist/bundle.js"></script>

5 結果

一個es6的簡單實例

 1 創建info.js

let name = 'why'
let age = '18'
let height  = 1.88
export {name,age,height}

2 修改main.js

將info.js導入 es6可以將.js省略

const {add,mul} = require("./mathUtils.js")
console.log(add(20,30))
//以下為es6的寫法
import {name,age,height} from './info'
console.log(name)

3 重新打包

4 結果

源代碼鏈接: https://pan.baidu.com/s/162ZOLc3x90IIgTy8VEx65g 提取碼: kjqw

 

webpack打包css和less

文件結構

 

在main.js里加載css和less

//依賴css文件
require('./css/normal.css')

//依賴less文件
require('./css/special.less')
document.writeln("<h2>你好哇，李銀河</h2>")

安裝css依賴 less依賴等

https://www.webpackjs.com/loaders/#%E6%A0%B7%E5%BC%8F 參考官網

npm install --save-dev css-loader

npm install style-loader --save-dev

npm install --save-dev less-loader less

修改webpack.config.js里的配置

  module: {
    rules: [
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'] 
      },
      {
        test: /\.less$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
              }, {
                  loader: "css-loader" // translates CSS into CommonJS
              }, {
                  loader: "less-loader" // compiles Less to CSS
              }]
      },
     
    ]
  }

打包

npm run build

結果

鏈接：https://pan.baidu.com/s/1Zr3NB0g701tZT3PFYICBkQ
提取碼：k5en