webpack学习（一）

最新推荐文章于 2024-11-02 20:49:21 发布

一身羊毛

最新推荐文章于 2024-11-02 20:49:21 发布

阅读量127

点赞数

分类专栏： webpack 文章标签： webpack 安装执行

本文链接：https://blog.csdn.net/a519991963/article/details/98962956

版权

webpack 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

前言

webpack官方文档很齐全，请看这里：传送门
我参照了官方文档后，实现的demo仓库地址
本文章主要记录了一些易错的点。代码仓库中同样也有注释。

1.package.json文件讲解

{
	private: true,// 私有，防止发布
	main:'index.js',  // 本文用不到这个属性。此属性是发布依赖包时方便引用的。如果有这个就是：								require（‘abc’）， 如果没这个：require（‘abc/dist/xx.js’)
	script: {
		build: 'webpack'
	}

}

2.webpack.config.js文件讲解

module.exports = {
	entry: './index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(_direname, './dist')
	}
}

3.安装和执行

1.安装：

npm init -y
npm install webpack webpack-cli -D

在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们
2.执行

npx webpack   // npx 是node 8.2版本的命令

相当于下方四个命令

./node_modules/.bin/webpack
./node_modules/.bin/webpack --config webpack.config.js
npx webpack --config webpack.config.js // 如果有webpack.config.js
npm run build // 参考上方package的script。 npm run build 相当于 npx，因为node标准一样

4.管理资源

对于css资源，use的值是有顺序的：从右到左。css-loader是处理css文件；style-loader是将处理过的css文件，整合到html中。

rules: [
	{
		test: /\.css$/,
		use:['style-loader', 'css-loader']
	}
]

5.devtool

vue脚手架使用：
开发使用： eval-source-map
生产使用： source-map

网友建议使用：
开发环境推荐：cheap-module-eval-source-map
生产环境推荐：cheap-module-source-map

我的使用:
开发环境推荐：cheap-module-eval-source-map （经测试，chrome可以调试，所以我选择它。）
生产环境： source-map（某些地方可能需要列信息，所以使用source-map）

详细分析：传送门
打断点分析：传送门
真正的分析还是官网靠谱：传送门

选项总结：
none：默认选项，不生成sourcemap
eval：用eval包含代码，并添加注释
source-map：生成map，注释为map文件地址
cheap：没有列信息
module：支持 babel转义

6. 热更新

watch: 只能自动编译代码，需要手动刷新浏览器

// package.json
"watch": "webpack  --watch"

webpack-dev-server： 自带服务器

npm install -D webpack-dev-server

// package.json
"start": "webpack-dev-server --open"

// webpack.config.js
// ps： 下面的内容可以省略
module.exports = {
	... ...
	devServer: {
		contentBase: 'dist'
	}
}

webpack-dev-middleware: 可以和express配合

// package.json
"express": "node server.js"

// package.json
module.exports = {
	output: {
		publicPath: '/'
	}
}

// server.js
var compiler = webpack(webpack.config);
var app = new express();
app.use(webpack-dev-middleware(compiler,{
	publicPath: webpack.config.output.publicPath
}))

app.listen(3000, function(){})

7.HMR

区别：
热更新需要刷新页面，会清空state数据
热替换只替换修改的代码，方便调试。

hot module replace: 热模块替换

使用：

“dev”: "node  ./src/dev-server.js

// dev-server.js
var webpackDevServer = require('webpack-dev-server')
var webpack = require('webpack')
var config = require('../webpack.config.js')
var options = {
  hot: true,
  contentBase: './dist'
}

var compiler = webpack(config)
webpackDevServer.addDevServerEntrypoints(compiler, options)
var server = new webpackDevServer(compiler, options)
server.listen(3000, 'localhost', function () { })

// webpack.config.js
  plugins: [
    new cleanPlu(),
    new htmlPlu({
      title: 'hmr11'
    }),
    new webpack.NamedModulesPlugin(),   // 提示热替换的名称
    new webpack.HotModuleReplacementPlugin()
  ]

// index.js
let element = createElement()
document.body.appendChild(element)

if(module.hot){
	module.hot.accept('./print.js',function(){
		printMe()
		document.removeChild(element)
		element = createElement()
		document.body.appendChild(element)
	})
}