cli同webpack模板项目引入bootstrap,通过webpack引入第三方库的方法【Web前端】

一般来说,引入第三方库有一下三种情况:

最近跟着技术胖进行学习,这些是学习过程中的笔记,这是webpack3.X的第3篇笔记。

可以通过npm安装bootstrap,然后用import直接导入bootstrap的方式进行整合,因为vue-loader能自动从node_modules下加载库。

  1. 通过CDN引入;
  2. 通过npm 安装并引入;
  3. 第三方js文件就在本地

消除无用的css

脚手架生成项目

通过CDN

使用purifyCSS可以大大减少css的冗余

执行命令用webpack模板生成一个名为vuestrap的项目

这是最简单的一种方式,例如引入高德地图,可以直接把以下代码放在index.html文件底部,这种情况与webpack无关,因为webpack的入口文件并不在此处

1.安装的命令:安装的webpack的插件

vue init webpack vuestrap

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

Npm I -D purifycss-webpack purify-css

在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit
tests,e2e都关掉(这些选项都随意)。? Project name vuestrap

npm

-D代表的是-save-dev,只是一个简写

? Project description A Vue.js project

通过npm install安装的包会放在node
modules文件夹下,当使用时,可以直接在用到的文件顶部引入进来,例如import或者require。但如果每个模块化的文件都会用到,那么每个文件都要去引入这个第三方文件,很繁琐,这时候就可以用webpack的插件:ProvidePlugin,可以理解这个插件的作用就是把第三方库引入,且它的作用域是全局的。

2.引入glob(因为要检查html模板)

? Author 省略

例如引入jquery

在webpack.config.js文件头引入glob

? Vue build standalone

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

Const glob = require(‘glob’);

? Install vue-router? Yes

那么就可以用$和jQuery了,它们两个都表示jquery,需注意的是$和jQuery后面的值(jquery)必须和npm
install jquery中的jquery保持一致,不然会找不到。

3.引入purifycss-webpack

? Use ESLint to lint your code? No

本地JS库文件

Const PurifyCSSPlugin = requrie(‘purifycss-webpack’)

? Setup unit tests with Karma + Mocha? No

会有这么一种情况:第三方的js文件就在本地,怎么通过webpack引入呢?比如第二种jquery的情况,

4.配置plugins

? Setup e2e tests with Nightwatch? No

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

在引入完成后,在webpack.config.js里配置plugins,代码如下:

选项选完,项目也就生成了。执行命令,安装项目依赖的组件

这样写肯定会找不到jquery了,因为它并不在node
modules中,这时可以用webpack配置中的resolve选项,给jquery指定一个别名,并配置其路径。

plugins:[

npm install

假如我们的jquery.js文件放在dist文件夹下面

//new uglify()

安装jquery

resolve:{
  alias: {
   $: path.resolve(__dirname, './dist/jquery.js'),
   jQuery: path.resolve(__dirname, './dist/jquery.js'),
  }
}

new htmlPlugin({

bootstrap是依赖jquery的,所以就先装上jquery,这里用的版本是1.11.3。稍后在配置的时候,是以webpack插件的方式进行打包,所以这里直接用npm进行安装,因为以插件方式打包的组件都是require进来的。执行命令,并保存到package.json中

这样就可以了。

minify:{

npm install jquery@1.11.3 –save-dev

通过loader

removeAttrubuteQuotes:true

注:如果想查看npm上jquery有哪些版本,可以执行命令:

除了ProvidePlugin这个插件,还有一个imports-loader可以完成引入第三方库的工作。

},

npm view jquery versions

test来指定哪个文件需要引入第三方库,通过options配置jquery。然后打包后可以看出,打包后的app.js文件变大了。

hash:true,

安装bootstrap

module: {
    rules: [
      {
        test: path.resolve(__dirname, "./src/app.js"),
        use: "imports-loader"
        options:{
          $:'jquery'
        }
      }
    ]
  }

template:’./src/index.html’

这里用的版本是3.3.0。执行下面命令,即可安装完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

}),

npm install bootstrap@3.3.0 –save-dev

您可能感兴趣的文章:

  • 详解webpack提取第三方库的正确姿势

new extractTextPlugin(“css/index.css”),

配置jquery

new PurifyCSSPlugin({

将jquery以插件打包,需要为webpack的plugins进行插件设置:在build/webpack.base.conf.js文件中,在整个配置对象的末尾增加plugins配置:

// Give paths to parse for rules. These should be absolute!

plugins: [

paths: glob.sync(path.join(__dirname, ‘src/*.html’)),

new webpack.ProvidePlugin({

})

$: “jquery”,

]

jQuery: “jquery”,

这里配置一个paths,主要的是需要找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用

“windows.jQuery”: “jquery”

注意:使用这个自动消除css的插件必须配合extract-text-webpack-plugin这个插件使用。

})

babel转化成ES6

]

Babel 使用基于js进行了扩展的语言,比如React的JSX

在文件的最上边引入 webpack 模块

1.安装依赖包:

const webpack=require(‘webpack’)

Cnpm install –save-dev babel-core babel-loader babel-preset-es2015
babel-preset-react

注释:在webpack.base.conf.js中的配置项,可以在dev和build出来的pro版本中都有效。以上的配置其实就是变量名的真正指向设置,这样,在页面中对jquery的各种名字的调用就会有效,否则bootstrap跑不起来。

2.在webpack中配置babel的方法如下:

引用bootstrap

{

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用,注意这里的路径,不在是从src/assets加载,而是换成了从node_modules加载。

test:/\.(jsx|js)$/,

import ‘bootstrap/dist/css/bootstrap.min.css’

use:{

import ‘bootstrap/dist/js/bootstrap.min.js’

loader:’babel-loader’,

配置bootstrap

options:{

因为bootstrap除了js和css文件外,还有字体文件需要一并打包,默认生成的webpack.base.conf.js中的moudle->rules设定中都已经包含对字体文件的打包设置,所以无需修改,很人性。
写完后,执行命令,运行效果。npm run dev

presets:[

“es2015″,”react”

]

}

},

exclude:/node_modules/

}

3.entry.js的代码:

importcss from ‘./css/index.css’;

{

let jspangString = ‘Hello Webpack’

document.getElementById(‘title’).innerHTML=jspangString;

}

4..babelrc配置

在项目根目录新建.babelrc 文件,并把配置写到文件里

{

“presets”:[“react”,”es2015″]

}

5..webpack.config.js里的loader配置

{

test:/\.(jsx|js)$/,

use:{

loader:’babel-loader’,

},

exclude:/node_modules/

}

6.ENV

安装npm install –save-dev babel-preset-env

然后修改.babelrc里的配置文件:

{

“presets”:[“react”,”env”]

}

打包后调试

Source-map 独立 map 行 列

Cheap-moudle-source-map 独立 行 不包括列

Eval-source-map eval  js  开发阶段 上线 行 列

Cheap-moudle-eval-source-map 列

开发和生产环境并行

开发环境

生产环境

模块化配置

js的模块化跟webpack的模块化原理是一样的

打包第三方类库:

1.安装Jquery

Npm install –save jquery

2.修改entry.js 文件

Import $ from ‘jquery’;

这里引入是不需要写相对路径的,因为jquery的包是在node_modules里的,只要写一个名jquery,系统会自动为我们查找的

引入好后我们就可以在entry.js 里使用jquery:

$(‘#title’).html(‘hello JSpang’);

另外用plugin引入

安装:

在webpack.config.js中引入webpack

Const webpack = require(‘webpack’);

引入成功后配置我们的plugins模块:

Plugins:[

New webpack.ProvidePlugin({

$:”jquery”

})

]

watch 的正确使用方法

watch的配置:

1.在webapck.config.js文件下配置:

watchOptions:{

//检测修改的时间,以毫秒为单位

poll:1000,

//防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存,不进行打包操作

aggregeateTimeout:500,

//不监听的目录

ignored:/node_modules/,

}

2.使用命令进行打包:

Webpack –watch

版权插件:BannerPlugin

在js文件里面配置:

1.new webpack.BannerPlugin(“版权归小胖籽所有”)

2.在引入使用这个插件之前必须是引入webpack

Const webpack = require(“webpack”);

抽离第三方类库

1.修改入口文件在webpack.config.js修改:

Entry:{

Entry:’/src/entry.js’,

Jquery:’jquery’

},

2.引入optimize插件

new webpack.optimize.CommonsChunkPlugin({

//name对应入口文件中的名字,我们起的是jQuery

name:’jquery’,

//把文件打包到哪里,是一个路径

filename:”assets/js/jquery.min.js”,

//最小打包的文件模块数,这里直接写2就好

minChunks:2

}),

配置完成后,我们可以先删除以前打包的dist目录,然后用webpack再次打包,你会发现jquery被抽离出来,entry.js文件也变小了。

多个第三方类库抽离

1.先用npm进行安装

Npm install vue –save

注意这里是–save 而不是-save-dev,因为vue在生产环境下也使用到

2.在入口配置中引入vue和jquery

Entry:{

Entry:’/src/entry.js’,

Jquery:’jquery’,

vue:’vue’

},

3.修改CommonsChunkPlugin配置

new webpack.optimize.CommonsChunkPlugin({

//name对应入口文件中的名字,我们起的是jQuery

name:[‘jquery’,’vue’],

//把文件打包到哪里,是一个路径

filename:”assets/js/[name].js”,

//最小打包的文件模块数,这里直接写2就好

minChunks:2}),

配置好以后依然直接webpack打包一下,就会发现jquery和vue都被我们分离出来

集中拷贝静态资源

这下面的3步都是在webpack.config.js文件下进行配置的

使用copy-webpack-plugin

1.插件安装:

Cnpm install –save-dev copy-webpack-plugin

2.引入插件

Const CopyWebpackPlugin = require(‘copy-webpack-plugin’)

3.配置插件

new copyWebpackPlugin([{

from:__dirname+’/src/public’,

to:’./public’

}])

配置好之后,我们进行webpack打包就可以了,打包完成后会看到你静态文件已经打包到dist文件中了

Json配置文件使用

在webpack1和webpack2里面,你需要引入一个json-loader的loader进来,但是在webpack3,你就不需要另外引入了

读出json内容:

第一步:现在我们的index.html模板中加入一个层,并给层一个Id,为了是在javascript代码中可以方便引用。

第二步:到src文件夹下,找到入口文件,我这里是entry.js文件。修改里边的代码,如下:

var json =require(‘../config.json’);

document.getElementById(“json”).innerHTML= json.name;

这两行代码非常简单,第一行是引入我们的json文件,第二行驶写入到到DOM中。

第三部:启用我们的npm run server命令就可以在浏览器中看到结果了。

热更新

其实在webpack3中启用热加载相当的容易,只要加入HotModuleReplacementPlugin这个插件就可以了。

new webpack.HotModuleReplacementPlugin()

现在只要你启动npm run
server后,修改index.html中的内容,浏览器可以自动给我们更新出最新的页面。