webpack学习-引入本地插件(如:jquery)

webpack学习 引入本地插件

##先上代码webpack.config.js文件中的配置

//webpack.config.js文件
module.exports = {
  //其它内容省略.....
  resolve: {
    //重点:此处在起别名.当使用'jquery'引入时,就相当于从别名后的路径中引入文件
    alias: {
      jquery: path.resolve(__dirname, 'public/js/jquery.js')
    }
  },
  plugins: [
    //重点:此处与别名那里是相配合的,此处的'jquery',就相当于是一个完整的路径了
    new webpack.ProvidePlugin({
      jquery: 'jquery',
      $: 'jquery'
    })
  ],
  //其它内容省略.....
}

#.重点1:resolve->alias起别名,并非是刚需,它也会被单独使用用来起别名,如将@改成src.

#.重点2:plugins->new webpack.ProvidePlugin({ jquery: 'jquery', $: 'jquery' })中的jqeury就是上文中起的别名,此处也可以直接写路径path.resolve(__dirname, 'public/js/jquery.js'),效果是相同的.

#.之后就可以全局的在页面中直接使用jquery或$调用jquery插件了,无需使用import/require进行引入.

#.自己定义的组件/JS等等别的文件,也能这样引入形成全局的.