webpack配置
Posted 通往代码之路
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack配置相关的知识,希望对你有一定的参考价值。
webpack配置中。。。。。。。。。。。。。。。。。
在进行配置之前,必须先要安装node环境:
进入nodeJS官网(nodejs.cn),下载稳定版本的node安装文件(node-xxxx.msi),一直下一步就可以。
node安装完成以后,就开始安装webpack:
分为两步;
一是全局安装:在项目所在的盘符下全局安装webpack,例如:F盘。命令行输入:
npm install webpack -g
出现这些时安装成功:
二是webpack依赖项:
在安装依赖项之前,需要在项目里安装一个配置项;进入我们的项目,
打开命令提示符;win+R输入cmd或者在文件夹目录地址栏选择路径直接输入cmd进入
如:
命令行输入:
npm init
完成配置项的安装,如果不是上线项目,一直回车就OK了,不用其他配置;
这时表示配置项 已经完成。
在项目的根目录下出现package.json文件;(原始的配置文件)
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1" }, "author": "", "license": "ISC", }
接下来就要创建webpack依赖项了
npm install --save-dev webpack
安装webpack依赖项
此时表示webpack已经完成,此时package.json中会出现一个新的字段
接下来在项目目录下新建文件(夹)app和public,在public里有一个index.html文件,app里有一个main.js和work.js,main.js作为一个入口文件使用,work.js里写代码
在main.js里引入work.js
require(\'./work.js\');
在index.html里引入main.js文件
<script src="./webpack.js/"></script>
接下来就要使用webpack来进行打包文件了,进入项目根目录,命令行输入
webpack app/main.js public/webpack.js
这时会在public文件夹下生成一个webpack.js文件
在项目目录下创建webpack.config.js文件(必须全局安装webpack才能使用)
module.exports = { //入口文件位置 entry:__dirname+\'/app/main.js\', //__dirnamenodeJS里的一个全局变量,指向当前项目的根目录 //出口文件位置 output:{ //打包后文件的位置 path:__dirname+\'/public\', //打包后文件名 filename:\'webpack.js\' } }
完成以上配置以后,在命令行直接输入 webpack 运行结果与运行命令 webpack app/main.js public/webpack.js 一致
配置package.json运行
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack", "test": "echo \\"Error: no test specified\\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^2.4.1" } }
完成以后命令行输入
npm run dev
直接运行打包文件。
基本的配置就到这里吧
以上是关于webpack配置的主要内容,如果未能解决你的问题,请参考以下文章
Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段