使用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 };
10.webstorm ?控制臺輸入 ?webpack ?編譯源js文件,生成目標js文件 ?bundle.js