webpack的使用1

時間 2019-12-20

標籤 webpack 使用简体版

原文原文鏈接

一、安裝(windows)javascript

安了npm後，npm install webpack -g，全局位置在 C:\Users\lihaihong\AppData\Roaming\npm\node_modules css

而後項目文件夾 =>html

npm init  #會自動生成一個package.json文件     //本身寫package.json就npm install
npm install webpack --save-dev #將webpack增長到package.json文件中

安裝開發工具java

npm install webpack-dev-server --save-dev

(spm install module-name -save 自動把模塊和版本號添加到dependencies部分——產品發佈依賴
spm install module-name -save-dve 自動把模塊和版本號添加到devdependencies部分——開發時依賴node

)webpack

二、使用web

添加index.html,entry.jsnpm

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

document.write("看看如何讓它工做！");

運行下json

添加模塊了gulp

新建module1.js

module.exports = '模塊1'

entry.js修改：

document.write("看看如何讓它工做！");
document.write(require('./module1.js')) // 添加模塊

運行下，看變化

------先運行entry.js，再執行require

三、加載器loader,處理js以外的其餘文件

style.css

background:yellow;

安裝對應的npm install css-loader style-loader，我一塊兒安裝報錯，分開安裝好了

entry.js加

require("!style-loader!css-loader!./style.css") // 載入 style.css

運行：webpack entry.js bundle.js => 背景變色

外部引入的樣式怎麼弄呢？

四、配置，可直接webpack

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //__dirname+'/x' 也能夠
  output: {
    path: __dirname,  // __dirname+'/a' ----就在根目錄a文件下
    filename: 'bundle.js'  //'[name]-[hash].js' ----main-63b4a6ae43aac97bb23d.js
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

注：「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

可改entry.js

require('./style.css')

運行webpack，效果同前

這樣就算打包了，將模塊打包到指定js裏

五、執行webpack => npm start

在package.json裏改

scripts:{

　　"start":"webpack"

}

六、webpack本地服務器，並無實現像gulp自動刷新

配置：package.json

scripts-- "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

webpack.config.js-----

devServer: {
    contentBase: "./",//本地服務器所加載的頁面所在的目錄
    //colors: true,//終端中輸出結果爲彩色
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  }

有colors報錯，屬性不對，多是版本問題吧

運行，npm run dev

http://localhost:8080/ 根目錄

另選可設置 contentBase: "....."

參考文獻：

http://webpackdoc.com/install.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。