Vue学习之Webpack

最新推荐文章于 2024-05-02 23:09:04 发布

意林_10

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量214

点赞数

分类专栏： vue学习文章标签： vue webpack

本文链接：https://blog.csdn.net/weixin_41951632/article/details/100182074

版权

vue学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、介绍：Webpack是当下最热门的前端资源模块化管理和打包工具。将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等实际需要的时候再异步加载。
webpack官网地址
2、安装：
（1）全局安装（不推荐）：$ npm install –g webpack
（2）本地安装（减少对环境的依赖）：$ npm install –-save-dev webpack
3、使用方式：
（1）初始化项目并安装 webpack：
$ npm init –y
$ npm install --save-dev webpack
（2）编写配置文件webpack.config.js：

module.exports = { 
	entry: path.join(__dirname,'./src/app.js’), 
	output: { 
		path: path.join(__dirname,'./bin’), 
		filename: 'app.bundle.js' 
	}
};

（3）使用npm脚本执行打包操作 package.json：
“scripts”: { “build”: “webpack” }
（4）执行打包操作：
$ npm run build

4、加载器（loader）：webpack 将所有的资源（ css, js, image 等）都看做模块，但是 webpack 能处理的只是 JavaScript ，因此，需要存在一个能将其他资源转换为模块，让 webpack 能将其加入依赖树中的东西，它就是 loader 。
（1）配置方式webpack.config.js：

module:{ 
	loaders:[{ 
		test 正则表达式，条件 
		exclude 正则表达式，不被包含的条件 
		include 数组，指定要被 loader 转化的文件或路径 
		loader 字符串，使用 ! 分割不同的 loader 
		loaders 数组，指定多个要使用的 loader 
	}] 
}

（2）加载器（babel-loader）：这个包允许使用 Babel 和 webpack 来转换使用了 ES6 语法的 JS 文件。
1）安装依赖：$ npm install --save-dev babel-core babel-preset-env babel-loader
2）配置.babelrc：src下创建.babelrc
{“presets”:[“env”]}
3）配置webpack.config.js：

module: { 
	loaders : [{ 
		test: /\.js$/, 
		exclude: /node_modules/,   //无需将这个文件进行转换
		loader: "babel-loader" 
	}] 
}

4）应用app.js上：const msg = ’hello world’

（3）加载器（css-loader!style-loader）：如果想从 JavaScript 模块中导入 CSS 文件可以安装 style-loader 和 css-loader ，运行后会产生一个<style>标签将会被插入到<head>标签中.
1）安装依赖：$ npm install --save-dev css-loader style-loader
2）配置webpack.config.js：

module: { 
	loaders : [{ 
		test: /\.css$/, 
		loaders: [”style-loader”, ”css-loader”] 
	}] 
}

3）应用app.js上：import css from ‘./style.css’

（4）加载器（file-loader）：如果想从 JavaScript 模块中导入文件可以安装 file-loader
1）安装依赖：$ npm install --save-dev file-loader
2）配置webpack.config.js：

module: { 
	loaders : [{ 
		test: /\.(png|svg|jpg|gif)$/, 
		loader: ”file-loader” 
	}] 
}

3）应用app.js上：
import from './images/photo1.png’
$(“#one”).attr(src, p1);

5、多入口：在配置文件中添加多个入口文件，对应的出口也应该动态设置。
配置：

entry: { 
	app:'./src/index.js', 
	print:'./src/print.js' 
}, 
output: { 
	filename: '[name].bundle.js', 
	path: path.resolve(__dirname, 'dist') 
}

6、插件（ plugin ）：loader 只能针对某种特定类型的文件进行处理，而 plugin 的功能则更为强大。在 plugin 中能够介入到整个 webpack 编译的生命周期。
（1）配置方式：
plugins :[ 插件实例 ]
（2）内置插件列表
参考地址：http://webpack.github.io/docs/optimization.html

webpack.optimize.UglifyJsPlugin：为了最小化压缩后的代码，提高加载速度，可以使用该插件。

//配置方式webpack.config.js： 
const webpack = require('webpack'); 
module.exports = { 
	… 
	plugins: [ 
		new webpack.optimize.UglifyJsPlugin({ 
			compress: { warnings: false, }, //是否需要警告信息
			output: { comments: false, } //是否需要注释信息
		}) 
	]
}

2）webpack.optimize.DedupePlugin：当项目中依赖的其他库时可能有些重复的，该插件可以在打包时删除这些重复。

//配置方式：
const webpack = require('webpack');
	module.exports = { 
		…
		plugins: [ 
		new webpack.optimize.DedupePlugin() 
	]
}

（3）第三方插件列表：

参考地址：https://webpack.js.org/plugins/

1）当入口文件出口文件较多时，如果手动维护出口文件与 html 之间的关系将会非常复杂，可以使用该插件完成 html 的自动构建，自动构建成功后将会把出口文件自动添加到 html 中。但是每次都只是生成一个空的 html 文档，如果想要定制 html 文档的内容，可以使用模板技术，这时需要安装一个 html-loader 用于处理 html 模板。

//配置方式webpack.config.js：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { 
	… 
	plugins: [ 
		new HtmlWebpackPlugin({ 
			title: ‘Output Management’ ,  // 标题 
			filename:'admin.html'    // 产生的文件名 
			template:'src/index.html'   // 模板 
		}) 
	] 
}

2）使用 source maps：可以准确定位错误出现在具体哪个模块中。

配置方式：
module.exports = { devtool: ‘inline-source-map’ }

3）使用 webpack-dev-server：是一个简单的 web 服务器，在代码修改后能重新构建代码并且刷新浏览器。

 使用方式： npm install --save-dev webpack-dev-server
 webpack.config.js

module.exports = { 
	… 
	devServer: { 
		contentBase: './dist' // 服务器服务目录 
	}, 
	…
}

 配置 package.json：“scripts”:{“start”: “webpack-dev-server --open”}

意林_10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之Webpack

1、介绍：Webpack是当下最热门的前端资源模块化管理和打包工具。将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等实际需要的时候再异步加载。webpack官网地址2、安装：（1）全局安装（不推荐）：$ npm install –g webpack（2）本地安装（减少对环境的依赖）：$ npm install –-save-dev we...
复制链接

扫一扫