本文目录一览:
- 1、webpack 能将html打包成js文件吗
- 2、webpack核心四要素总结
- 3、如何用webpack打包一个网站应用
- 4、webpack中是什么意思?有什么用?如何用
- 5、如何用 webpack 打包 node
- 6、webpack npm start和npm run server
webpack 能将html打包成js文件吗
load是个解析器,webpack只能加载js文件,但是开发vue是,vue文件;图片是png,jsx、json、EXE、等等这些都不是js文件;所以需要load解析器;把他们解析成js格式的文件,这样webpack就能加载处理了
webpack核心四要素总结
入口:webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。参数定义了打包后的入口文件,可以是个字符串或数组或者是对象;如果是数组,数组中的所有文件会打包生成一个filename文件;如果是对象,可以将不同的文件构建成不同的文件。
可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src。
entry: {
app: './src/main.js'
}
出口:webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程。
path: 打包文件存放的绝对路径
publicPath: 网站运行时的访问路径
filename:打包后的文件名
当我们在entry中定义构建多个文件时,filename可以对应的更改为[name].js用于定义不同文件构建后的名字。
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV ==='production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
Loader:webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都是模块,不同模块的加载是通过模块加载器(webpack-loader)来统一管理的。loaders之间是可以串联的,一个加载器的输出可以作为下一个加载器的输入,最终返回到JavaScript上。
loader:loader的名称(必须)
include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
query:为loaders提供额外的设置选项(可选)
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
插件:插件目的在于解决 loader 无法实现的其他事。插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。
plugins: [
new webpack.DefinePlugin({
'process.env':require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
//
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname,'../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
如何用webpack打包一个网站应用
随着前端技术的发展,越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用。
一般我们写页面,大概都是这样的结构:
index.html
css
style.css
js
index.js
...........
这样我们的html里直接引用css和js,完成一个网页应用。用webpack也类似,只是webpack把图片、css和js都编译打包成一个文件,我们只需要引用一个文件就可以了。
1.我们需要先安装node环境。没安装的请自行安装
2.在项目目录下输入npm init初始化一个node项目,输入项目名称等信息,完成后生成一个package.json文件。
3.在项目目录下安装webpack
npm install --save-dev webpack
4.我们需要一个webpack.config.js文件,记录webpack配置信息。它的配置大概这样:
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //编译后的文件路径
filename: 'app.js'
},
module: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 来编译处理
{ test: /\.js$/, loader: 'babel' },
//图片文件使用 url-loader 来处理,小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
};
module.exports = config;
我们需要指定编译的入口文件和输出的目录路径,以及css和js用什么loader处理,比如我使用了less,要编译less文件,就指定less-loader,js我要用es6来写,为了兼容性,用babel来转成es5的代码。如果要使用react,也可以指定jsx等的编译方式。
5.这些loader都是需要npm安装的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015
6.如果需要用babel,在项目目录下新建一个名为.babelrc的隐藏文件,里面这样写:
{"presets":["es2015"]}
保存。
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹,src放图片、css和js的源代码,build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件,我们在里面可以愉快地写es6的代码,比如:
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);
可以看到css我们都通过require的方式引进来,这样webpack会把css和js打包进一个文件。
9.我们还差个index.html,放在项目文件夹下就可以,正常写,引入build/app.js就可以啦!
10.让我们试试吧
webpack中是什么意思?有什么用?如何用
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。
如何用 webpack 打包 node
按照通常的做法, package.json中的dependencies都是会被项目require的依赖, devDependencies都是和环境相关的依赖, 如果自己也是这样的话(或者也可以改成这样), 那么只需要:
var json = require('./package.json') // 这个路径视当前的路径进行对于修改
module.exports = {
entry: {
app: path.resolve(__dirname, 'app/index.jsx'),
// 将 第三方依赖 单独打包
vendor: Object.keys(json.dependencies)
},
output: {
path: __dirname + "/build",
filename: "[name].[chunkhash:8].js",
publicPath: '/'
},
// ...省略若干行...
plugins: [
// ...省略若干行...
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].[chunkhash:8].js'
})
]
}
webpack npm start和npm run server
最近开始学习webpack,webpack可以看做是模块打包机,分析项目结构,找到JavaScript模块和一些浏览器不能直接运行的语言,类似Scss,JSX,Typescript等,并将其转换和打包为合适的格式供浏览器使用。
没有比较性
Gulp/Grunt是一种能够优化前端的开发流程的自动化工具,webpack是模块化的解决方案,本质上就不是一样,而且在很多时候,webpack可以替代前面两者的工作
webpack是webpack自带的一条打包命令,是最基本的打包命令。
npm run webpack,则是在package.json文件中有一个script配置项,在这个script里面自定义的一条命令,它通过npm来运行。例如:
当脚本名为“start”时,可以省略“run”,直接为:
npm run server等也类似