webpack教程

時間 2019-11-07

標籤 webpack 教程简体版

原文原文鏈接

1.安裝

先裝好node和npm，由於webpack是一個基於node的項目。而後javascript

npm install -g webpack

2.創建項目

建一個文件夾，而後新建一個package.json的文件在項目根目錄下css

mkdir testwebpack
cd  testwebpack
npm init

2.1詢問一些問題:按回車選擇默認值自動生成文件

package.json
 package name: (webpack-test)   包名(demo)
 version: (1.0.0)               版本
 description:                   描述
 entry point:                   入口程序(main.js)
 test command:                  測試指令("dev": "webpack-dev-server","build": "webpack -p")
 git repository:                node_modules
 keywords:                      關鍵字
 author:                        做者
 license: (ISC) MIT             MIT
 Is this ok? (yes)              yes

3.在建立webpack.config.js

module.exports = {
  entry: './main.js',  /*你要打包的js文件*/
  output: {
    filename: 'bundle.js'  /*打包後生成的文件*/
  },
   module: {
rules:[
  {
    test: /\.css$/, /*引入css文件配置*/
    use: [ 'style-loader', 'css-loader' ]
  },
]
  },
  module: {
rules:[
  {
    test: /\.(png|jpg)$/, /*引入圖片文件配置*/
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }
]
 }
};

3.1例如個人main.js裏寫

document.write('<h1>Hello World</h1>');

require('./app.css');

var img = document.createElement("img");
img.src = require("./small.png");
document.body.appendChild(img);

3.2查看打包好後使用的JS則建立html文件

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

4.建立服務器

npm i -g webpack webpack-dev-server

5.安裝依賴關係。

npm install

6.打包

npm run dev

相關標籤/搜索

每日一句

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

webpack教程

1.安裝

2.創建項目

2.1詢問一些問題:按回車選擇默認值 自動生成文件

3.在建立webpack.config.js

3.1例如個人main.js裏寫

3.2查看打包好後使用的JS則建立html文件

4.建立服務器

5.安裝依賴關係。

6.打包

2.1詢問一些問題:按回車選擇默認值自動生成文件