工程化: webpack介绍和基础用法

一、介绍webpack是现代JavaScript应用程序的静态模块打包器二、命令行1、安装命令npm install webapck -g: 全局安装webapck环境npm install webapck-cli -g: 全局安装webpack-cli环境webpack -v: 测试webpack安装成功显示webpack安装的版本webpack-cli -v: 测试webpack-cli安装成功显示webpack-cli安装的版本webpack --watch: 监听打包命令每次更新文件自动打包三、webpack.config.js配置文件1、entry: 入口文件指定webpack用哪个文件作为项目的入口2、output: 输出指定webpack把处理完成的文件放置到指定路径3、module: 模块用于处理各种类型的文件4、plugins: 插件如热更新、代码重用等5、resolve: 设置路径指向6、watch: 监听用于设置文件改动后直接打包module.exports { context: path.resolve(__dirname, ../), entry: { app: ./src/main.js }, output: { path: config.build.assetsRoot, filename: [name].js, publicPath: process.env.NODE_ENV production ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: [.js, .vue, .json], alias: { vue$: vue/dist/vue.esm.js, : resolve(src), } }, module: { rules: [ { test: /\.vue$/, loader: vue-loader, options: vueLoaderConfig }, { test: /\.js$/, loader: babel-loader, include: [resolve(src), resolve(test), resolve(node_modules/webpack-dev-server/client)] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: url-loader, options: { limit: 10000, name: utils.assetsPath(img/[name].[hash:7].[ext]) } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: url-loader, options: { limit: 10000, name: utils.assetsPath(media/[name].[hash:7].[ext]) } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: url-loader, options: { limit: 10000, name: utils.assetsPath(fonts/[name].[hash:7].[ext]) } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if its native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: empty, fs: empty, net: empty, tls: empty, child_process: empty } }