--save是對生產環境所需依賴的聲明(開發應用中使用的框架，庫) --save-dev是對開發環境所需依賴的聲明(構建工具，測試工具) ~~~ const webpack = require('webpack'); const path = require('path'); module.exports = { entry:'./src/index.js', output:{ path:path.resolve(__dirname,'dist'), filename:'js/index.js' } } ~~~ >`__dirname`是node.js中的一個全局變量，它指向當前執行腳本所在的目錄 ### 使用webpack構建本地服務器 ~~~ npm install --save-dev webpack-dev-server ~~~ `webpack.config.js`配置 ~~~ module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path:path.resolve(__dirname,'public'), filename: "bundle.js" }, devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 } } ~~~ 在`package.json`中的`scripts`對象中添加如下命令，用以開啟本地服務器： ~~~ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" } ~~~ 在終端中輸入[npm run serve]() - ##Loaders Loaders需要單獨安裝并且需要在`webpack.config.js`中的`modules`關鍵字下進行配置 * * * * * - ### babel * * * * * - #### 先安裝對應的loader ~~~ npm install babel-loader babel-core babel-preset-env webpack ~~~ - #### 配置webpack.config.js文件 ~~~ module:{ rules:[ { test:/\.js$/, use:{loader:'babel-loader'}, exclude: /(node_modules|bower_components)/, //處理對應文件夾下的js文件 include : path.resolve(__dirname,'app') } ] } ~~~ * * * * * - ## css - 安裝loader ~~~ npm install --save-dev style-loader css-loader ~~~ - 配置webpack.config.js文件 ~~~ module.exports = { ... module: { rules: [{ test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader"} ] }] } }; ~~~ - 在entry的入口的js中 ~~~ import 'xxx.css' ~~~