webpack初入门及webpack打包实例

基础入门

browerify和webpack的区别：

前身：browserify 缺点：只能转化JS

webpack作用：

一切都是模块化（js、css、图片等）；一个模块加载器、打包工具

webpack安装

前提已安装node环境：终端运行node -v或npm -v

1、安装webpack命令环境

npm install webpack -g //-g意思是在所有目录下都可以使用webpack，全局安装

验证是否安装成功

webpack --version

注意：如果直接这么安装，默认安装最新版本，后续打包时可能会报webpack not installed Install webpack to start bundling: $ npm install --save-dev webpack的错，所以安装时最好指定版本

npm  install  webpack@3.5.5 -g  --unsafe-perm

2、package.json 工程文件（需要依赖模块、库描述、版本...）

生成package.json，在目录下进入终端，运行

npm init

3、安装本地webpack

npm install --save-dev webpack@3.5.5

注意：这里安装局部webpack依然需要指定版本，否则后续打包会报错

4、实例操作

新建文件webpack-demo

文件下新建  index.html 页面 entry.js 入口文件

终端运行

webpack entry.js bundle.js

页面中应用

<script src="bundle.js"></script>

自动解决依赖：默认支持commonJs规范

loader加载其他类型文件

webpack默认只支持javaScript文件。需要用到加载器（loader）

css文件：style-loader css-loader

下载loader，终端运行

npm install style-loader css-loader -D

注意：在webpack中，多个loader加载 !用于连接多个loader

js中引入

require('style-loader!css-loader!./new_file.css');

配置文件webpack.config.js

作用：配置一些webpack需要的入口、出口、loader

module.exports = {

    entry: './entry.js',//入口文件

    output:{

        filename: 'bundle.js'//出口文件

    },
    
    devtool: 'source-map', //直接生成source-map

    module:{

    rules: [{

        test: /\.css$/, //当webpack在编译过程中遇到require()或者import语句导入一个后缀为.css的文件时，先将它通过css-loader转换，再通过style-loader转换，然后才打包

        use:[

            'style-loader',

            'css-loader',

        ]

    }]

    }

};

入口文件entry.js中：

import './style.css';  //引入css文件

配置了配置文件，只需要在终端输入

webpack

不同场景编译命令

webpack：开发环境下编译（打包）

webpack -p：生产环境下编译（压缩）

webpack -w：监听文件改动，自动编译（速度快）

webpack -d：开启（生成）source maps（用来调试）

用其他名字的配置文件

补充知识：如果配置文件叫config.js，运行时命令：

webpack --config config.js

webpack使用ES6

babel配置：

终端运行：

npm install --save-dev babel-loader babel-core babel-preset-env

ES6导出模块：export default {}   引入模块：import 名字 from 模块名

配置babel的预设：

在webpack.config.js中

{
	test: /\.js$/,
	loader:'babel-loader',
    options:{
		presets:['env'] //转码规则
	},
	exclude: /node_modules/ //排除哪些目录
}

终端运行

webpack

若是报错Module build failed: Error: Cannot find module '@babel/core'，执行

npm i babel-loader@7.1.5 -D

或者新建文件.babelrc

{

    "presets": ['env']

}

webpack-dev-serve

安装命令环境：

npm install webpack-dev-serve -g

若报错：invalid "instanceof" keyword value Promise webpack和webpack-dev-serve版本不兼容造成的，解决办法：降低版本：

npm install webpack-dev-server@2.9.4 --save-dev

若报错：listen EACCES 127.0.0.1:8080 此端口号已经被监听过了（端口号被占用）

解决办法：

webpack-dev-server --port 8088 //更改成可用端口号

浏览器访问 http://localhost:8088/

其他命令：

webpack-dev-server --inline 改变完代码以后，自动刷新浏览器

webpack-dev-server --hot 热重载（局部更改）

配置文件webpack.config.js中配置

devServer: {

    port: 8080, //端口号
    
    inline: true //是否自动刷新浏览器

},

把运行命令放入package.json中

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server --port 8080 --inline --hot"

},

终端中输入命令：

npm run dev

省略后缀如.css

webpack.config.js中配置：

resolve: {

    "extensions": ['.js', '.css']

}

js中就可省略后缀名：

import aaa from './new_file';

require('./style')