本篇文章主要讲解webpack学习笔记，通过本文您将了解到有关webpack，文件的相关内容，文章来自网络，请参考。

命令使用 npm install webpack -g 作为全局安装, 在任意目录使用 npm install webpack --save-dev 作为项目依赖安装 npm init 创建package.json npm install webpack-dev-server --save-dev 使用webpack-dev-server启动服务器 webpack --progress -colors 让编译的输出内容带有进度和颜色 webpack --watch 如果不想每次修改模块后都重新编译, 那么可以启动监听模式。 开启监听模式后, 没有变化的模块会在编译后缓存到内存中, 而不会每次都被重新编译, 所以监听模式的整体速度是很快的 webpack --display-error-details 用来打印错误详情 npm install xxx-loader --save-dev 安装多个加载器: npm install babel-core babel-preset-es2015 babel-preset-react npm webpack --config webpack.config.js 执行打包命令 npm start 启动开发模式下的server npm run start:prod 启动生产模式的server npm run build 打包生产模式的代码 npm run lint: eslint 代码检查 npm run lint:watch: eslint 监视 npm run remove:build 删除dist目录 npm run clean:build 清除dist目录 // 调用webpack webpack 开发环境下编译 webpack -p 产品编译及压缩 webpack --watch 开发环境下持续的监听文件变动来进行编译 webpack -d 引入source maps 配置文件 webpack: 开发模式相关配置 webpack: 生产模式相关配置 server.js: 配置本地的server(包含dev server和prod server) 将server部分分离到一个单独到的文件配置 package.json //webpack.config.dev.js var webpack = require('webpack'); var path = require('path'); var config = { // 入口文件配置 entry: { path.resolve(__dirname, 'app/index.js'); }, // 文件输出配置 output: { path: path.resolve(_dirname, 'build'), filename: 'bundle.js', publicPath: 'http://www.web520.cn/' }, // 插件项 plugins: [], // 加载器配置 module: { loaders: [ { test: /pattern/, loader: 'xxx-loader', exclude: /dir/, query: { presets: ['react'] } }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' // 内联的base64的图片地址, 图片要小于8k, 直接的url的地址则不解析 } ] }, // 其他解决方案配置 resolve: { extensions: ['', '.js', '.json'], alias: {} }, watch: true }; module.exports = config; webpack.server.js var webpack = require('webpack'); var webpackServer = require('webpack-dev-server'); var config = require('./webpack.config.dev.js'); var compiler = webpack(config); var server = new webpackDevServer(compiler, { contentBase: './app', historyApiFallback: true, hot: true, //热启动 inline: true, // 监控js变化 stats: { color: true } }); config.entry.unshift('webpack-dev-server/client?:8080/', 'webpack/hot/dev-server'); server.listen(8080, 'localhost', function(err) { if(err) { console.log(err); } console.log('Listening at localhost:8080...'); }); <!-- package.json --> 'script': { 'start': 'node server.js' } 配置详解 entry: 入口, 定义要打包的文件 output: 出口, 定义打包输出的文件；包括路径, 文件名,还可能有运行时的访问路径（publicPath）参数 module: webpack将所有的资源都看做是模块, 而模块就需要加载器； |---- loaders: 主要定义一些loaders, 定义哪些后缀名的文件应该用哪些loader |-------- test: 匹配文件后缀, 检测哪些文件需要此loader, 是一个正则表达式 |-------- exclude: 忽略哪些文件 |-------- query: 参数 (或直接写于loader如: loader: 'url-loader?limit=8192') |------------ presets: resolve: 其他解决方案配置 |---- extensions: 忽略文件扩展名, require文件时可直接使用require('file'),而非带后缀如require('file.js') |-------- alias: 模块别名定义,方便后续直接饮用别名无需多写长地址, 后续直接require(key) plugins: 定义一些额外的插件 watch: 值为boolean, 监听文件变化 配置生产环境 开发环境: webpack需要日志输出, sourcemap, 错误报告等 生产环境: webpack需要做代码压缩, 对文件名进行hash处理等 区分环境