webpack安装与配置
1.webpack是基于node环境的,所以在安装webpack之前要先安装node.js
2.有了node环境,安装webpack3.6.0(版本随心情)
3.创建src(存放源代码)和dist(用于存放打包之后的)文件夹(写文件main.js和mathUtils.js)
4.使用webapack将main.js打包到dist/bundles.js下(webpack ./src/main.js ./dist/bundle.js)
虽然只使用了main.js,但是与其他关联的也会一起打包(main.js为入口)
5.接下来在index.heml,中引入dist/bundle.js(这样打包之后就引入一个就ok,之前的话是有几个js文件引入几个,现在就很方便啦~),
npm init,会自动生成package.json文件
6.接下来,运行index.heml,就可以啦~(可以在编辑器,也可以在浏览器)
7.接下来写一个info.js文件,写完之后重新打包一下(webpack ./src/main.js ./dist/bundle.js)
8.因为每次打包都需要(webpack ./src/main.js ./dist/bundle.js),所以创建一个webpack.config.js文件来配置出入口等
注意,在配置出口的时候要使用绝对路径!!!否则会报错
先npm init,初始化(生成package.json)如果package.json依赖其他文件时,npm install;
配置好之后,每次打包,只需要输入:webpack就ok辣~
如果不适用webpack(这个词)来打包的话,可以在package中配置
ps:在配置文件中配置之后,默认是在本地执行webpack,如果直接在终端(或CMD)执行webpack,就是在全局中(全局和本地的webpack版本可能不同)
9.安装本地webpack(npm install webpack@3.6.0 --save-dev),这时package.json中就会显示 webpack版本(开发时依赖版本)
10,接下来如何配置css文件(写一个css文件,mian.js依赖一下这个css文件)
webpack主要处理打包时的JS文件,而loader会帮助我们处理css文件(不同的文件处理安装不同的loader)
通过npm安装需要使用的loader(npm install --save-dev css-loader 和npm install --save-dev style-loader)
css-loader只负责将css文件进行加载 style-loader负责将样式添加到DOM中
接下来在webpack.config.js中配置一下(loader的执行顺序是从右向左的)
配置好c's's之后,npm run build重新打包,运行index.html
11.webpack配置less(首先有一个less文件)
接着在入口中引入less文件
安装less 需要的loader(npm install --save-dev less-loader less)
接下来配置webpack.config.js
重新打包之后,运行就ok~!
12.webpack图片文件的处理
安装url loader(npm install --save-dev url-loader)
webpack.config.js中配置一下
接下来,就可以看到图片了
npm install file-loader --save-dev
重新打包,运行文件
注意。配置一下webpack.config.js文件中的publicPath(编译以后的文件都在dist/文件夹下)
对打包后的图片重新命名
13.将ES6转为ES5(使用babel loader)
安装babel loader( npm install --save-dev babel-loader@7 babel-core babel-preset-es2015)
接下来在webpack.config.js中配置
重新打包之后,可以看到bundle.js中的const都变为了var
14webpack配置vue
先将vue安装到node_module文件夹下
npm install vue --save
在webpack.config.js中配置,指定导入的vue的版本,包含(compiler),如果不设置的话默认调用runtime
15
创建vue时template和el的关系
index.html页面只放一个div,以后修改也不去频繁的改动index.html文件
所有的元素都放在main.js的template中(vue内部会将template中的内容替换到主页的div)
16配置vue
下载vue 的loader(npm install vue-loader vue-template-compiler --save-dev)
webpack.config.js中配置
再去安装plugin插件(vue-loader版本14以上需要安装plugin插件)
也可以在package.json中直接更改vue-loader的版本(更改后重新安装 npm install,根据我们更改的版本重新安装)
如果想在组件中注册其他组件:可以这样做
子组件
父组件中注册引用
还得导入~
配置省略后缀名
17 plugin横幅(BannerPlugin是webpack自带的插件)
先引入webpack
在创建
重新打包后,最后就会在bunder.JS文件中添加“最终版权归冯亚婷所有”
18 htmlWebpackPlugin插件(可以自动生成一个index.html文件,可以指定模板来生成;将打包的js文件自动通过script标签插入到body中)
安装插件(npm install html-webpack-plugin --save-dev)
修改webpack.config.js中的配置
注意在使用时,自动生成的script标签路径的修改(因为之前配置了所有url前面都加“dist/”),现在把配置去掉
设置生成时借鉴模板(模板中只有一个div#app就行了,不用在手动导入js,插件自动导入)
19,对bundle.js进行压缩的插件uglifyjs(npm install uglifyjs-webpack-plugin@1.1.1 --save-dev)指定版本1.1.1与CL2配合
安装
webpack.config.js中配置
重新打包之后,就会看到bundle.js已经被压缩了