关于 webpack 总结

关于 webpack 在windows安装总结

目录

关于 webpack 在windows安装总结

1、安装webpack

      查看webpack的可用版本号

npm view webpack versions

      安装指定版本的webpack

npm install webpack@4.10.1 -g

2、安装webpack-cli

     查看webpack-cli 的可用版本号

npm view webpack-cli versions

    安装指定版本的webpack-cli

npm install webpack-cli@3.1.0 -g

3、安装uglifyjs-webpack-plugin

    查看uglifyjs-webpack-plugin的版本号

npm view uglifyjs-webpack-plugin versions

    安装指定版本的uglifyjs-webpack-plugin

   

npm install uglifyjs-webpack-plugin@2.1.0 -g

OK 。webpack 安装完毕，其插件uglifyjs-webpack-plugin 也安装完毕。

在某个盘符的文件夹下创建并编写webpack.config.js文件。

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
	
	entry : {
		entry : './a.js'
	},
	output :{
		//输出的路径,用了node语法
		path:path.resolve(__dirname,'dist'),
		//输出的文件名称
		filename:'bundle.js'		
	},
	//模块：例如解读CSS，图片如何转换，压缩
	module:{},
	//插件，用于生产模板和各项功能
	plugins:[
	new uglify()
	],
	//配置webpack开发服务功能
	devServer:{}		
	
}

打开控制台，进入此目录执行 webpack 指令。

但有可能会出现如下错误：

E:\webpack_test1\node_modules\webpack-cli\bin\cli.js:231
                                throw err;
                                ^

Error: Cannot find module 'uglifyjs-webpack-plugin'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (E:\webpack_test1\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (E:\webpack_test1\webpack.config.js:2:16)
    at Module._compile (E:\webpack_test1\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (E:\webpack_test1\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (E:\webpack_test1\node_modules\webpack-cli\bin\convert-argv.js:115:13)
    at requireConfig (E:\webpack_test1\node_modules\webpack-cli\bin\convert-argv.js:117:6)
    at E:\webpack_test1\node_modules\webpack-cli\bin\convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (E:\webpack_test1\node_modules\webpack-cli\bin\convert-argv.js:122:15)
    at yargs.parse (E:\webpack_test1\node_modules\webpack-cli\bin\cli.js:228:39)
    at Object.parse (E:\webpack_test1\node_modules\yargs\yargs.js:567:18)
    at E:\webpack_test1\node_modules\webpack-cli\bin\cli.js:206:8
    at Object.<anonymous> (E:\webpack_test1\node_modules\webpack-cli\bin\cli.js:505:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at module.exports.filename (C:\Users\avic\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\import-local\index.js:16:66)
    at C:\Users\avic\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:13:6

其错误的原因是webpack 并没有找到相应的uglifyjs-webpack-plugin插件。因此还需要一条指令，让npm与webpack关联上

E:\webpack_test1>npm link uglifyjs-webpack-plugin

再次执行webpack。就可以 执行打包操作了。

---