webpack學習！lession1

1.命令行安裝！css

前提：安裝node.jshtml

1.1 全局安裝npm node

npm i npm -g

1.2 全局安裝webpackwebpack

npm i -g webpack

1.3 cd到工程文件夾，安裝局部webpack和webpack-cliweb

npm i webpack --save-dev

npm i webpack-cli --save-dev

1.4 創建一個配置文件：npm

webpack-dev-config.jsjson

module.exports = {
  entry:"./src/index.js", //入口文件
  output: {
    path:_dirname,
    filename:"./dist/bundle.js"
  }
}

在package.json中加入運行腳本瀏覽器

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "webpack --config webpack-dev-config.js --mode development"
  },

接下來就能夠進行js文件的打包bash

//運行命令
npm run pack   //pack就是本身寫的運行腳本

1.5在入口文件index.js中能夠引入多種文件js、css等等！ui

require('./hello.js')
require('style-loader!css-loader!./style.css')

注意，webpack是不支持css的，須要安裝loader依賴模塊

//安裝css依賴模塊
npm install css-loader style-loader --save-dev

在引入時加入style-loader!css-loader!

'style-loader!css-loader!./style.css'

1.六、講效果展現在瀏覽器窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./release/bundle.js"></script>
</body>
</html>

只須要將bundle.js引入就行！