--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' ~~~