webpack配置

1.npm init初始化,生成package.json包

2.npm install .生成package-lock.json

3.再package.json里再test下面新写命令,"build" : "webpack", 同时webpack.config.js里,path:path.resolve(__dirname,'dist'),filename:'bundle.js',之后npm run build

4.很有可能全局和本地的版本不一致,所以配置build,可以在终端里下载webpack , npm install webpack@3.6.0 --save-dev

5.在package.json里发现devDependencies(开发时依赖),dependencies(运行时依赖)

6.loader:(1)css文件转成js文件,main.js引入css文件,require('./css/normal.css')

                   (2)去webpack官网下载对应的loader,loaders里找样式,按照步骤npm安装,以及webpack.config.js里配置module

                (3)css-loader只负责将css文件加载,style-loader负责加载css样式

                (4)use里,从右至左执行

                (5)配置图片时,在webpack.config.js里新创建个pubilcPath:"dist" ,这样打包后的图片会出现在dist文件夹里

7.loader:es6转成es5:终端npm install --save-dev babel-loader@7 babel-core babel-preset-es2015,在Webpack.config.js里 修改options: {

                        presets: ['es2015']

                      }

8.webpack配置vue:npm install vue --save,因为我们后续是在实际项目中也会使用vue的,所以并不是开发时依赖,

                (1)在main.js里引入vue

                        import Vue from 'vue'

                        new Vue({

                                el:"#app",

                                data:{

                                                message:"你好啊"

                                           }

                            }),

                (2)在webpack.config.js里配置

                                resolve:{

                                    //alias:别名

                                    alias:{

                                        'vue$':'vue/dist/vue.esm.js'

                                            }

                                    }

                    (3)npm install --save-dev vue-loader vue-template-compiler

9.Plugin:插件 const path = require('path')

                        const webpack = require('webpack')

                        module.exports = {

                        plugins:[

                                        new webpack.BannerPlugin('最终版权归summer所有')

                                    ]

                },

        重新打包,查看bundel.js文件头部,会看到/*最终版权归summer所有*/

10.把index.html打包到dist文件夹里,

                (1)下载插件:npm install html-webpack-plugin --save-dev

                   (2)修改webpack.config.js中plugins部分内容

                            1.导入模块     const htmlWebpackPlugin = require('html-Webpack-Plugin')

                            2.plugins:[

                                    new webpack.BannerPlugin('在最终版权归summer所有'),

                                    new htmlWebpackPlugin({

                                                    template:'index.html'

                                    }),

                                           ]

11.js压缩 的Plugin:压缩js代码

                        (1)npm install uglifyjs-webpack-plugin@1.1.1 --save-devs

                        (2)修改webpack.config.js文件,使用插件:

                                              const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

                                                plugins:[

                                                        new webpack.BannerPlugin('在最终版权归summer所有'),

                                                        new uglifyJsPlugin()

                                                      ]

12.搭建本地服务器:这个本地服务器基于node.js搭建,内部由express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果

                      终端:npm install --save-dev webpack-dev-server@2.9.1

                               devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:

                                contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist

                                port:端口号

                                inline:页面实时刷新

                                historyApiFallback:在SPA页面中,依赖HTML5的hist模式

                                webpack.config.js文件配置:         devserver:{

                                                                                                     contentBase:'./dist',  

                                                                                                      inline:true  },       

                                 再配置另一个scripts:--open参数表示直接打开浏览器     "dev":"webpack-dev-server --open"

13.配置文件合并:npm install merge 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。