webpack基础配置

（1）安装webpack

首先创建一个目录，比如demo，然后使用npm初始化配置

npm init

接下来填好选项后，完成后会在demo目录下生成一个package.json的文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

（2）接下来在本地局部安装webpack。package.json文件已经就绪，接下来在本项目中安装Webpack作为依赖包

npm install webpack --save-dev

--save-dev会作为开发依赖来安装webpack。安装成功后，在package.json中会多出一项配置：

"devDependencies":{
    "webpack":"^2.3.2"
}

接着需要安装webpack-dev-server，可以在开发环境提供很多服务。比如启动服务器、热更新、接口代理等，配置起来也很简单。同样，在本地局部安装：

npm install webpack-dev-server --save-dev

②除了上述方法外，还可以现在 npm 配置文件 package.json 文件的script中添加一个快速启动 webpack-dev-server服务的脚本，

执行时运行 npm run dev 命令，就会执行脚本中dev字段的命令，其中，--open指的是运行命令后，自动打开浏览器，--config指读取配置文件的路径。webpack的项目中，webpack配置通常都命名为webpack.config.js, 并存放在build文件夹下。

当然如果区分开发版本和正式版本，常区分命名webpack.dev.conf.js 和 webpack.prod.conf.js, 通常还会有一个webpack.base.conf.js用来配置两个版本相同配置，然后通过import和merge形式添加到各自版本中

对于脚本中的配置，除了 --open 很多 --config之外，还有几个常用的一起在这里总结。

--open: 在执行命令是自动在浏览器打开页面
--config: 指明读取的配置文件的路径
--progress: 在控制台打印编译过程信息
--host: 指明执行的IP地址，默认是 127.0.0.1，也就是 localhost
--port: 指明执行时启用的端口号
--watch: 根据构建是得到的依赖关系，对项目所依赖的所有文件进行监听，发生改变即重新构建（该功能现在一般使用webpack-dev-server自动刷新机制和热替换HMR机制替代）
--hide-modules: 执行编译时不将webpack模块内容添加到编译输出文件中

安装完成后，最终的文件内容。

（3）本质js文件
webpack就是一个.js配置文件，你的架构好或者差都体现在这个配置里，随着需求的不断出现，工程配置也是逐渐完善的。由浅入深，一步步来支持更多的功能。

首先在demo目录下创建一个js文件：webpack.config.js，并初始化它的内容。

var config={

};
module.exports = config;

这里的module.exports = config；相当于export default config；由于目前还没有安装支持ES6编译插件，所以不能直接使用ES6的语法，否则会报错。

（4）添加启动脚本，安装webpack-dev-server服务

在 npm 配置文件 package.json 文件的script中添加一个快速启动 webpack-dev-server服务的脚本

{
  "scripts": {
    "test": "echo \"Error: on test specified\" && exit 1 ",
    "dev": "webpack-dev-server --open --config build/webpack.config.js" 
  }
}

当运行npm run dev时，就会执行webpack-dev-server --open --config build/webpack.config.js命令，其中--config是指向webpack-dev-server读取的配置文件路径，这里读取我们在上一步创建的webpack.config.js文件。--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8000，不过ip和端口都是可以配置的。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --host 172.172.172.1 --prop 8888 --open --config build/webpack.config.js"
  },

这样访问地址就改为了172.172.172.1:8888,。一般在局域网下，需要让其他同事访问时可以这样配置，否则用默认的127.0.0.1（localhost）即可。

（5）入口和出口

webpack配置中最重要的也是必选的两项是入口（Entry）和出口（Output）。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译。出口则是用来配置编译后的文件存储位置和文件名。

在demo下新建一个空的main.js作为入口的文件，然后在webpack.config.js中进行入口和输出的配置。

posted @ 2019-03-29 14:36 剑仙6 阅读(243) 评论(0) 编辑收藏举报

刷新页面返回顶部

剑仙6

webpack基础配置

公告