码迷，mamicode.com
首页 > Web开发 > 详细

webpack 简单配置

时间：2018-01-15 17:34:22      阅读：256      评论：0      收藏：0      [点我收藏+]

标签：spi   remove   des   yii   oss   静态   get   css   位置   

1.webpack 是一个现代JavaScript 应用程序的静态打包器，它能够把各种资源，例如JS,样式，图片
　　等都作为模块来使用处理,将许多松散的模块按照依赖和规则打包成符合生产部署的前端资源，
　　还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。
2.安装
　　前提条件，请确保安装了Node.js的最新版。
　　进入相应的文件夹
　　　　首先执行 进入相应的文件夹 npm init 初始化
　　　　然后可以全局安装 npm install webpack --save-dev
　　　　安装指定的版本使用:npm install webpack@3.0.0 --save-dev
　　安装好之后写一个hello.js 进行打包
　　　　技术分享图片
 
3.建立项目的webpack 文件
　　　　首先初始化目录: npm init
　　　　然后安装webpack: npm install webpack --save-dev
　　如果webpack 的配置文件不使用默认的文件名webpack.config.js
 
　　那么在执行打包的时候，就要指定配置文件的名字
　　　　例如： 配置文件的名字为 webpack.dev.config.js
　　　　webpack --config webpack.dev.config.js
　　　　webpack 的打包命令可以结合 npm 的脚本使用例如：
　　技术分享图片
　　　　　　　　　　
　　　　　　　　那么执行的命令为 : npm run webpack
　　4.配置:
　　　　(1) Entry 应用程序的起点入口，可以是一个文件，如果传递一个数组，那么那么数组的每一
　　　　　　项都会执行，也可以是一个对象。
　　　　　　例如：
　　　　　　　　　　entry: "./app/entry", // string | object | array 
　　　　　　　　　　entry:["./app/entry1", "./app/entry2"],
　　　　　　　　　　entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] },
　　　　
　　　　(2) Output 位于对象最顶级键(key),包括了一组选项，指示webpack 如何输出，
　　　　　　以及哪里输出，和他你所打包或使用webpack 载入的任何内容。
　　　　　　例如：　　　　　

　　　　　　　　output: {
　　　　　　　　　　　　// webpack 如何输出结果的相关选项

　　　　　　　　　　　　path: path.resolve(__dirname, "dist"), // string
　　　　　　　　　　　　// 所有输出文件的目标路径
　　　　　　　　　　　　// 必须是绝对路径（使用 Node.js 的 path 模块）

　　　　　　　　　　　　filename: "bundle.js", // string
　　　　　　　　　　　　filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
　　　　　　　　　　　　filename: "[chunkhash].js", // 用于长效缓存

　　　　　　　　　　　　// 「入口分块(entry chunk)」的文件名模板（出口分块？）

　　　　　　　　　　　　publicPath: "/assets/", // string
　　　　　　　　　　　　publicPath: "",
　　　　　　　　　　　　publicPath: "https://cdn.example.com/",

　　　　　　　　　　　　// 输出解析文件的目录，url 相对于 HTML 页面

　　　　　　　　　　　　library: "MyLibrary", // string,
　　　　　　　　　　　　// 导出库(exported library)的名称

　　　　　　　　　　　　libraryTarget: "umd", // 通用模块定义
　　　　　　　　　　　　libraryTarget: "umd2", // 通用模块定义
　　　　　　　　　　　　libraryTarget: "commonjs2", // exported with module.exports
　　　　　　　　　　　　libraryTarget: "commonjs-module", // 使用 module.exports 导出
　　　　　　　　　　　　libraryTarget: "commonjs", // 作为 exports 的属性导出
　　　　　　　　　　　　libraryTarget: "amd", // 使用 AMD 定义方法来定义
　　　　　　　　　　　　libraryTarget: "this", // 在 this 上设置属性
　　　　　　　　　　　　libraryTarget: "var", // 变量定义于根作用域下
　　　　　　　　　　　　libraryTarget: "assign", // 盲分配(blind assignment)
　　　　　　　　　　　　libraryTarget: "window", // 在 window 对象上设置属性
　　　　　　　　　　　　libraryTarget: "global", // property set to global object
　　　　　　　　　　　　libraryTarget: "jsonp", // jsonp wrapper

　　　　　　　　　　　　// 导出库(exported library)的类型

　　　　　　　　　　　　/* 高级输出配置（点击显示） */

　　　　　　　　　　　　pathinfo: true, // boolean
　　　　　　　　　　　　// 在生成代码时，引入相关的模块、导出、请求等有帮助的路径信息。

　　　　　　　　　　　　chunkFilename: "[id].js",
　　　　　　　　　　　　chunkFilename: "[chunkhash].js",
　　　　　　　　　　　　// 长效缓存(/guides/caching)
　　　　　　　　　　　　// 附加分块(additional chunk)」的文件名模板

　　　　　　　　　　　　jsonpFunction: "myWebpackJsonp", // string
　　　　　　　　　　　　// 用于加载分块的 JSONP 函数名

　　　　　　　　　　　　sourceMapFilename: "[file].map", // string
　　　　　　　　　　　　sourceMapFilename: "sourcemaps/[file].map", // string
　　　　　　　　　　　　// 「source map 位置」的文件名模板

　　　　　　　　　　　　devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string
　　　　　　　　　　　　// 「devtool 中模块」的文件名模板

　　　　　　　　　　　　devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string
　　　　　　　　　　　　// 「devtool 中模块」的文件名模板（用于冲突）

　　　　　　　　　　　　　　umdNamedDefine: true, // boolean
　　　　　　　　　　　　// 在 UMD 库中使用命名的 AMD 模块

　　　　　　　　　　　　　　crossOriginLoading: "use-credentials", // 枚举
　　　　　　　　　　　　　　crossOriginLoading: "anonymous",
　　　　　　　　　　　　　　crossOriginLoading: false,
　　　　　　　　　　　　// 指定运行时如何发出跨域请求问题

　　　　　　　　　　　　/* 专家级输出配置（自行承担风险） */

　　　　　　　　　　　　devtoolLineToLine: {
　　　　　　　　　　　　　　　　test: /\.jsx$/
　　　　　　　　　　　　},
　　　　　　　　　　　　// 为这些模块使用 1:1 映射 SourceMaps（快速）

　　　　　　　　　　　　hotUpdateMainFilename: "[hash].hot-update.json", // string
　　　　　　　　　　　　// 「HMR 清单」的文件名模板

　　　　　　　　　　　　hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string
　　　　　　　　　　　　// 「HMR 分块」的文件名模板

　　　　　　　　　　　　sourcePrefix: "\t", // string
　　　　　　　　　　　　// 包内前置式模块资源具有更好可读性

　　　　　　　　　　},

　　　　3)Plugins
　　　　　　例如： 安装 html-webpack-plugin
　　　　　　　　命令： npm install html-webpack-plugin --save-dev
　　　　　　　　首先在webpack.config.js 中引入插件
　　　　　　　　　　var htmlWebPackPlugin = require(‘html-webpack-plugin‘);
　　　　　　　　　　
　　　　　　　　　　然后在:
　　　　　　　　　　　　plugins: [
　　　　　　　　　　　　　　new htmlWebPackPlugin({
　　　　　　　　　　　　　　　　// 指定生成的文件的名字
　　　　　　　　　　　　　　filename:‘index.html‘,
　　　　　　　　　　　　　　　　// 指定html 模板
　　　　　　　　　　　　　　template:‘index.html‘,
　　　　　　　　　　　　　　　　// 标签生成的位置
　　　　　　　　　　　　　　inject:‘head‘,
　　　　　　　　　　　　　　/* title:‘webpack is good‘,
　　　　　　　　　　　　　　　　data: new Date()*/
　　　　　　　　　　　　　　minify:{
　　　　　　　　　　　　　　　　// 删除注释
　　　　　　　　　　　　　　　　removeComments:true,
　　　　　　　　　　　　　　　　// 删除空格
　　　　　　　　　　　　　　　　collapseWhitespace: true
　　　　　　　　　　　　　　}
　　　　　　　　　　})]


　　　　(4)loader
　　　　　　loader 就是webpack 用来预处理模块的，在一个模块被引入之前，会预先
　　　　　　用loader处理模块的内容。
 
　　　　　　安装css loader
　　　　　　　　npm install style-loader css-loader --save-dev
　　　　　　　　npm install postcss-loader --save-dev
　　　　　　　　npm install autoprefixer --save-dev
　　　　　　　　　　{
　　　　　　　　　　　　test: /\.css$/,
　　　　　　　　　　　　loaders: [‘style-loader‘, ‘css-loader‘,
　　　　　　　　　　　　// 处理浏览器前缀
　　　　　　　　　　　　{ loader: ‘postcss-loader‘,
　　　　　　　　　　　　options: {
　　　　　　　　　　　　　　plugins: [require(‘postcss-import‘),
　　　　　　　　　　　　　　require(‘autoprefixer‘)],
　　　　　　　　　　　　　　browser: [‘last 5 versions‘] } }]
　　　　　　　　　　　　}
　　　　　　sass
　　　　　　　　npm install sass --save-dev
　　　　　　　　npm install sass-loader --save-dev
　　　　　　　　{ //sass打包处理,加载从右向左，注意顺序
　　　　　　　　　　　　test:/\.sass$/,
　　　　　　　　　　　　use: [
　　　　　　　　　　　　　　{loader: "style-loader"},
　　　　　　　　　　　　　　{loader: "css-loader"},
　　　　　　　　　　　　　　{loader: "postcss-loader",options:{
　　　　　　　　　　　　　　　　plugins:[require(‘postcss-import‘),require(‘autoprefixer‘)] //自动处理class加前缀，-ms-和-webkit-
　　　　　　　　　　　　　　}},{loader: "sass-loader"}
　　　　　　　　　　　　]
　　　　　　}
　　　　　　
　　　　图片处理
　　　　　　npm install file-loader --save-dev
　　　　　　　　{
　　　　　　　　　　// 图片处理
　　　　　　　　　　test:/\.(png|jpg|jpeg|gif|svg)$/i,
　　　　　　　　　　use:[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　loader:‘file-loader‘,
　　　　　　　　　　　　　　options:{
　　　　　　　　　　　　　　　　name:‘src/assets/[name]-[hash:5].[ext]‘
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　　]
　　　　　　　　}
　　　　　　npm install url-loader --save-dev 可以将图片转为base64
　　　　　　　　{
　　　　　　　　　　// 图片处理
　　　　　　　　　　test:/\.(png|jpg|jpeg|gif|svg)$/i,
　　　　　　　　　　use:[
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　loader:‘url-loader‘,
　　　　　　　　　　　　　　　　options:{
　　　　　　　　　　　　　　　　　　limit:20000000,
　　　　　　　　　　　　　　　　　　name:‘src/assets/[name]-[hash:5].[ext]‘
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}
　　　　　　　　　　]
　　　　　　　　}
　　　　(5)devServer
　　　　　　安装命令：
　　　　　　　　npm install webpack-dev-server --save-dev
　　　　　　　　在 package.json 中的 scripts 中添加 "start": "webpack-dev-server"
　　　　　　　　devServer: {
　　　　　　　　// 自动打浏览器
　　　　　　　　open:true,
　　　　　　　　// 访问端口
　　　　　　　　port:8090,
 
　　　　}

webpack 简单配置

标签：spi   remove   des   yii   oss   静态   get   css   位置   

原文地址：https://www.cnblogs.com/nmxs/p/8288836.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！