webpack 是一个打包工具,进行代码分割,模块通过loader处理各种文件,模块打包器,按需加载,使初始化加载时间更短,适合大型项目。模块热更新
1.先初始化package.json ,执行 npm init
2.安装对应的模块加载,css-loader,vue-loader等
3.新建文件夹,放文件
4.新建app.vue 组件
5.新建入口文件,index.js
6.新建webpack.config.js
<pre>
<code>
const path = require(''path);
const isDev = process.env.NODE_ENV === 'development';
const config = {
target:'web',
enrty:path.join(__dirname, 'src/index.js'),
output: {
filename:'bundle.js',
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css.loader'
]
},
{
test: /\.(gif|jpg|jpeg| png|svg)$/,
use: [
{
loader:'url-loader',
options: {
limit:1024,
name: '[name]-xxx.[ext]'
}
}
]
}
]
},
plugins: [
new webpack.DedinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development":"production"'
}
}),
new HTMLplugin()
]
}
if(isDev) {
// 用来在页面进行js调试
config.devtool = '#cheap=module-eval-source-map',
config.devServer = {
port: 8000,
host:'0.0.0.0',
// 把错误显示在网页上
overlay: {
errors: true,
},
open: true,
// 热更新,只改变当前组件的变化,防止其他的信息不见了
hot: true,
config.plugins.push(
new webpack.HotMoudleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
),
//做路由配置
historyFallback: {
}
}
}
module.exports = config
</code>
</pre>
url-loader 是依赖file-loader 是对file-loader的封装,先读取文件的大小,然后判断大小,把小一点的图片打包在css里面,减少请求的次数。
7.在package.json里面添加脚本,build:"webpack --config webpack.config.js".之所以在里面添加,是因为外面调用webpack是全局的,而项目里面的版本和外面的可能不一样。
8. 配置webpack-server ,在package.json 文件里面,先安装cross-env 用来告诉webpack是生产环境还是开发环境,不直接写的原因是不同操作系统的写的方式不一样,如果直接写在里面,要写两个。修改package.json 文件,build: "cross=env" NODE_ENV = production webpack --config webpack.config.js' . dev: cross=env" NODE_ENV = development webpack-dev-server --config webpack.config.js'
9. 安装html-webpack-plugins .
### webpack 4.12 新的不同点。
####1.webpack 和webpack-cli分离开了,所以全局安装完webpack 还需要安装webpack-cli。执行webpack a.js b.js 是把a打包成b,但是会报错。CLI(命令行工具)已经转移到了一个单独的包webpack-cli中。
除了webpack自身外,请额外全局安装webpack-cli来使用CLI。执行npm uninstall webpack-cli
npm install -g webpack-cli
####2配置开发还是生产模式
<pre>
<code>
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
</code>
</pre>
提示我们没有配置webpack的mode选项,默认有production和development两种模式可以设置,因此我们尝试设为development模式,在命令行输入:webpack --mode development. 重新执行,你的项目已经可以成功打包一半了
####3.入口文件位置发生变化
但是会报错如下
<pre>
<code>Module not found: Error: Can't resolve 'hello.bundle.js' in '/xdev/webpack/newwebpack'</code>
</pre>
意思就是没有找到入口模块。
也就是说webpack4以上重新调整了打包模块的入口文件位置。这里我是看到别人写的说是调整到src下面了,然后把你的hello.js移动到src下面,并且改成index.js。
#### 4. 打包方式发生变化
再次执行。 webpack index.js bundle.js
会提示can.t resolve相关的错误。
原因是,webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js',其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。 通过配置也可以更改打包文件名,在没有配置的情况下,会直接生成mian.js
因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行
webpack --mode development
或者
webpack --mode production。
这样便能够实现将'./src/index.js'打包成'./dist/main.js'。
####5.将打包指令加入package.json
不过每次都要输入这个命令,非常麻烦,我们在package.json中scripts中加入两个成员:
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production。
我们在根目录执行:
npm run dev
可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。
####6. 配置webpack 其他打包参数
在package.json 里面script里加入
webpack --mode development --watch --progress --display-modules --colors --colors 打包这个模块的原因--display-reasons
这的意思是,watch监听文件变化,可以自动打包,progerss可以看到打包的进度 display-modules 打包的模块 打包的文字是彩色的 还有打包的原因。
#### 7. 使用require 引入css文件的时候,需要手动指定用哪些loader进行处理,否则还是会报如下的错误
<pre><code>ERROR in ./src/assets/css/hello.less 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type.</code></pre>
意思就是没有找到合适的loader进行css文件的处理,进行修改如下。
require('css-loader!./assets/css/hello.less')执行npm run dev 显示成功。打开页面,但是页面css并没有生效,想要文件生效,还需要用到style-loader less-loader 这里有个坑哇,一定要注意顺序。如下:require('style-loader!css-loader!less-loader!./assets/css/hello.less')。重新执行,页面运行正常了。
#### 8.再多页面应用中,可以定义多个入口。
<pre><code>
enter:{
main: '',
page:''
},
output: {
path:'',
filename:'[name]-[hash].js'
}
</code></pre>
####9.解决手动解决文件引入的问题
安装: cnpm i html-webpack-plugins -save-dev ,我安装的时候,一直报语法错误,找了好久,后来终于发现,是package.json 多了一个,哈哈哈,想抽自己几下。安装后进行配置: plugins: [
new HtmlWebpackPlugin({template: 'index.html'})
],然后重新执行,就会把index.html 复制一份,到dist目录下,自动引入打包后的文件。 在配置了index为模块后,就出现了另一个问题,那就是直接拷贝了模版的链接,但是显然两个文件的是不一样的。所以这里需要去掉,根目录下index里的引入文件。publicPath:'http://cdn.com',主要用于设置上线地址。以这个绝对路径为开头。
####10.配置多个页面html
复制 new HtmlWebpackPlugin({chunks[a]用于指定当前文件,excludeChunks[a,b]排除法})
####11.减少http请求,使性能达到极致。在github上,HtmlWebpackPlugin ,官方为了解决问题的demo: script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()
<%=
compilation.assets[HtmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>
这样写会报错,解决办法还没找到,初步觉得是模版解析的问题。
####11.postcss-loader
这个官网给了几种配置,在webpack里使用要单独写一个配置文件,还有哇,module.exports = {
// parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
},这个sugarss,居然是个.sss为后缀名的css解析,不能用{},一直报错这个Unnecessary curly bracket,显示是语法错误。
###没有解决的问题: 1.自动读取外链文件引入 2.image-webpack-loader 无法添加到指定文件夹 3。热更新。
总结: 1、webpack-cli必须要全局安装,否则不能使用webpack指令;
2、webpack也必须要全局安装,否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js,默认输出文件./dist/main.js。
网友评论