Close webpack，Webpack 基礎使用

2023-12-06 阅读 23 评论 0

摘要：使用webstorm編譯： 1.新建一個工程（最基本的工程） 2.在webstorm的控制臺，使用命令行 ? ? cnpm install webpack ?-g ?全局安裝 3.安裝完后，可以使用 ? webpack -h ?查看webpack是否安裝完成 4.之后，cnpm?install?webpack?--save-de

使用webstorm編譯：

1.新建一個工程（最基本的工程）

2.在webstorm的控制臺，使用命令行 ? ? cnpm install webpack ?-g ?全局安裝

3.安裝完后，可以使用 ? webpack -h ?查看webpack是否安裝完成

4.之后，cnpm?install?webpack?--save-dev ? 將webpack 安裝到項目的依賴項

5.最后，安裝 ?loader ?,cnpm install --save-dev ?css-loader 和cnpm install --save-dev ?style-loader?

6.在工程中，首先創建一個靜態頁面 index.html(只引入 build/bundle.js)

7.src中的main.js

1 require("./style/style.css");
2 
3 var words = "Hello World";
4 
5 console.log(words);
6 
7 var Hello = require("./js/Hello");
8 var h = new Hello();
9 h.sayHello();

8.用一個 ?src ?文件夾放源文件，包括css文件和js（包含js主文件main.js）

9.在當前根目錄下創建一個 ??webpack.config.js ?

 1 var webpack = require('webpack');2 3 4 /*在任何模塊文件內部,可以使用__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑*/5 module.exports = {6     entry: './src/main.js',7     output: {8         path: `${__dirname}/build`,9         filename: 'bundle.js'
10     },
11     module: {
12         loaders: [
13             {test: /\.css$/, loader: 'style!css'}
14         ]
15     }
16 };