本文是笔者初学 webpack 后的一个简单总结和重新思考的过程。文章中加入了更多的认识和理解,关于配置就比较简陋了。希望能帮助到大家,有误的地方也请多多指正 (^^ ゞ 。最后,祝大家元旦快乐ヾ (≧▽≦*)o
gulp/grunt: 他们是一个中能优化前端流程的工具,他们也可以转换 scss,less,实现自动刷新页面的功能。
webpack: 它则属于一个预编译模块方案(模块打包工具),我们现在的前端代码开始分模块进行构建,则会用到 import "./a.js"; 、require ("a.js"); 等方法。但是浏览器是不认识这样的方法。这事,webpack 就出现了,它采用预编译的方式,在代码加载到页面前,把这些模块引用的方式转换成浏览器可以识别的 js 代码。
npm init
安装 webpack 依赖:
- // 安装到项目目录
- npm i - D webpack
- // __dirname 是node.js一个全局变量,指向当前执行的脚本所在文件目录。
- const webpack = require('webpack');
- const path = require('path');
- const htmlWebpackPlugin = require('html-webpack-plugin');
- module.exports = {
- entry: path.resolve(__dirname, 'app/main.js'), // 唯一入口文件
- output: {
- path: path.resolve(__dirname, 'build'), // 打包后文件存放的位置
- filename: 'js/[name].js', // 打包后输出文件的文件名
- },
- devServer: {
- contentBase: path.resolve(__dirname, 'build'), // 服务器所加载的页面目录
- inline: true,
- port: 2333,
- hot: true,
- },
- module: {
- loaders: [
- {
- test: /\.css$/,
- use: [
- { loader: 'style-loader' },
- {
- loader: 'css-loader',
- options: {
- modules: true, // 指定启用css modules
- }
- },
- {
- loader: 'postcss-loader',
- options: {
- plugins: [require('autoprefixer')], // 为css在不同浏览器中添加前缀
- browser: ['last 5 versions'] // 浏览器最新的五个版本。
- }
- },
- ]
- },
- {
- test: /\.less$/,
- use: [
- { loader: 'style-loader' },
- {
- loader: 'css-loader',
- options: {
- modules: true, // 指定启用css modules
- }
- },
- {
- loader: 'postcss-loader',
- options: {
- plugins: [require('autoprefixer')], // 为css在不同浏览器中添加前缀
- browser: ['last 5 versions'] // 浏览器最新的五个版本。
- }
- },
- { loader: 'less-loader' },
- ]
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- include: '/app',
- exclude: /node_modules/,
- query: { presets: ['latest'] }
- }
- ]
- },
- plugins: [
- new HtmlWebpackPlugin({
- template: path.join(__dirname, 'index.html'), // 被编译的HTML文件路径
- filename: path.resolve(__dirname, 'build/index.html'), // 编译后的HTML文件存放路径
- inject: 'body', // 编译后的js被插入HTML的body中。
- title: 'webpack is great!', //可以通过模板引入HTML文件中。
- }),
- new webpack.HotModuleReplacementPlugin(),
- ],
- };
上面是我们常见的 webpack 文件,这里我们先通过 entry, output, loader(上面代码中的 module 模块), plugins 对 webpack 进行讲解。
entry: 入口文件,告诉 webpack 文件入口在哪里。可用三种方式表示,字符串,数组,对象。
- entry: path.resolve(__dirname, '/app/main.js'), // 唯一入口文件
output: 只能有一个配置文件。需要两个基本的配置: a filename, path
- output: {
- path: path.resolve(__dirname, 'build'), // 打包后文件存放的位置
- filename: 'js/[name]-[chunkhash].js', // 打包后输出文件的文件名
- }
chunkhash: 不同模块文件,生成不同的打包文件,具有独特的标志,在修改 a.js 文件后,只对 a.js 进行重新打包。 除了 chunkhash 以外, 一般出口文件为:'bunld.js', '[name].js]','[name]-[hash].js'。
publicPath在打包后的 js 标签中添加前缀。
- output: {
- path:path.resolve(__dirname, 'build'),
- filename: 'js/[name]-[chunkhash].js', // 为每一个生成的js,带上hash
- publicPath: 'http://cdn.com/' // 在打包后的js标签中添加前缀。
- }
效果:
使用上述的 cdn 或者 hash 的方式: 生成模式下更新内嵌 css,html 文件里 url 值。
loader: 资源转换器。(所有的资源都是模块,例如 less 通过 loader 可转换成 css)。 test: 正则。 loader: 编译方法。
plugin: 做 loader 无法做到的功能,以对象形式引入。例如模块热加载。
我们这里写一个简单的 demo。
只讲解 webpack 中 loader, plugin 中一两个常用的配置,方便大家理解配置的意义。
我们的目录结构:
index.html:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>webpack demo1</title>
- </head>
- <body>
- <div id="app">
- hello, webpack !
- </div>
- </body>
- </html>
main.js:
- const app = document.getElementById('app');
- app.innerText = "change app text!";
webpack.config.js
- // __dirname 是node.js一个全局变量,指向当前执行的脚本所在文件目录。
- const webpack = require('webpack');
- const path = require('path');
- module.exports = {
- entry: path.resolve(__dirname, 'app/main.js'),
- // 唯一入口文件
- output: {
- path: path.resolve(__dirname, 'build'),
- // 打包后文件存放的位置
- filename: 'js/[name]-[chunkhash].js',
- // 打包后输出文件的文件名
- },
- module: {},
- plugins: [],
- };
我们可以看到,我们并没有在 index.html 中插入 js。所以打开 index.html 效果如下:
现在我要达到 js 可以自动插入 html 的效果。
安装插件:
htmlWebpackPlugin 的相关配置
- npm install -D html-webpack-plugin
- plugins: [
- new HtmlWebpackPlugin({
- template: path.join(__dirname, 'index.html'), // 被编译的HTML文件路径
- filename: path.resolve(__dirname, 'build/index.html'), // 编译后的HTML文件存放路径
- inject: 'body', // 编译后的js被插入HTML的body中。
- title: 'webpack is great!' //可以通过模板引入HTML文件中。
- }),
- ],
然后我们运行 webpack,我们需要在控制台输入:
- webpack--config webpack.config.js--progress--colors
在运行 webpack.config.js,(--progress)显示它的打包模块的进度:..%。
如果报错 无法识别 webpack 请全局安装 webpack。
运行后我们控制台表现为:
然后我们发现 build 文件夹新增了几个文件。
我们打开其中 index.html 会发现 js 已经被插入其中了。
点击 build 中的 index.html 我们会发现页面已经发生了改变。
我们文件插入成功了!
最后,在 package.json 中配置运行方式。
以后我们只需要在控制台输入:npm run webpack 即可。
安装:
- npm i -D style-loader css-loader postcss-loader autoprefixer
作用:
css-loader: 处理 css 文件中的 url() 等
style-loader: 将 css 样式插入 html。
postcss-loader: 灰常的强大,一个后处理器,有很多插件 如:autoprefixer 为一些 css 属性在不同浏览器上的引用,加上对应的前缀。
,loader 顺序和他们执行的功能是有关的,如果打乱可能会报错。
- postcss-loader css-loader style-loader
- module: {
- loaders: [{
- test: /\.css$/,
- use: [{
- loader: 'style-loader'
- },
- {
- loader: 'css-loader',
- options: {
- modules: true,
- // 指定启用css modules
- }
- },
- {
- loader: 'postcss-loader',
- options: {
- plugins: [require('autoprefixer')],
- // 为css在不同浏览器中添加前缀。
- browser: ['last 5 versions'] // 浏览器最新的五个版本。
- }
- },
- ]
- },
- ]
- }
- loader: 'style-loader!css-loader!postcss-loader'
- loaders: ['style-loader', 'css-loader', 'postcss-loader'] // 数组处理从右到左。
- }
webpack3.0 以后推荐使用第一种方式,我们在 main.js 文件中引入的 css:
。
- import "./style.css"
现在我们看执行后的效果。
css 样式被插入 html 中了!U• ェ •*U
如果我们使用的是 less 或者 sass 只需要添加如下操作。
- 修改 test:
- test: /\.less$/,
- 在use后面添加一个对应的loader 即可。
- { loader: 'less-loader' },
我们修改 main.js
- import "./style.less";
- const app = document.getElementById('app');
- app.innerText = "change app text!";
- let changeText = () = >{
- return 'function change text!!###!';
- }
- app.innerText = changeText();
同时我们也发现了,每次运行 npm run webpack 都会打包出新的带有 hash 的 main.js。
可以配置
来清除,但这里我们简单的修改:
- clean-webpack-plugin
- output: {
- path: path.resolve(__dirname, 'build'), // 打包后文件存放的位置
- filename: 'js/[name].js', // 打包后输出文件的文件名
- },
babel 转换:
- npm install -D babel-loader babel-core babel-preset-latest
- loaders: [
- {
- test: /\.js$/, // 正则匹配loader对象
- loader:'babel-loader',
- include: '/src', // 使用babel-loader 转换的目录
- exclude: /node_modules/, //排除的目录
- query: { presets: ['latest'] } //使用的版本控制。
- }
- ]
然后打开 build 中的 index 文件:
,webpack-dev-server 是一个小型的 Node.js Express 服务器。
- npm i -D webpack-dev-server
- devServer: {
- contentBase: path.resolve(__dirname, 'build'), // 服务器所加载的页面目录
- inline: true,
- port: 2333,
- hot: true, //这需要配合Hot Module Replacement实现模块热加载。
- },
- new webpack.HotModuleReplacementPlugin()
- "server": "webpack-dev-server --config webpack.config.js"
目录结构:
package.json:
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "webpack": "webpack --config webpack.config.js --progress --colors",
- "server": "webpack-dev-server --open"
- },
- "devDependencies": {
- "autoprefixer": "^7.2.3",
- "babel-core": "^6.26.0",
- "babel-loader": "^7.1.2",
- "babel-preset-latest": "^6.24.1",
- "css-loader": "^0.28.7",
- "html-webpack-plugin": "^2.30.1",
- "less": "^2.7.3",
- "less-loader": "^4.0.5",
- "postcss-loader": "^2.0.9",
- "style-loader": "^0.19.1",
- "webpack": "^3.10.0",
- "webpack-dev-server": "^2.9.7"
- },
webpack.config.js:
点击跳转: webpack-demo1
来源: https://www.cnblogs.com/stone-lyl/p/8168680.html